正则表达式与表单验证技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52232797/article/details/111565142

本文探讨了正则表达式的基础及其在表单验证中的应用，讲解了如何利用正则表达式进行数据格式校验，以及如何在JavaScript和jQuery中实现表单验证，确保用户输入的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button>verify</button>
		<input type="text">
		
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			$('button').click(function(){
				/* //先获取输入框中的值
				let phone = $('input:eq(0)').val();
				//定义验证规则
				//let phoneVerify = /^1[0-9]{10}$/;
				let phoneVerify = /^1\d{10}$/;
				//进行验证
				console.log(phoneVerify.test(phone));
				
				let name = $('input:eq(1)').val();
				let nameVerify = /^[0-9A-z]{6,12}$/i;
				console.log(nameVerify.test(name)); */
				
				let email = $('input:eq(0)').val();
				//let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.[0-9A-z]{1,}/;
				let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
				console.log(emailVerify.test(email)); 
			})
		</script>
		
	</body>
</html>

2.表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#">
			<label for="uname">username：</label><input type="text" name="uname" id="uname"><span></span><br>
			
			<label for="email">email：</label><input type="text" name="email" id="email"><span></span><br>
			
			<input type="submit" value="check">
		</form>
		
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			
			let unameVerify = /^[0-9A-z]{6,12}$/i;
			let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
			$('form').submit(function(){
				
				let flag = false;
				
				$('input:not([type="submit"])').each(function(){
					let content = $(this).val();
					//用户名验证
					if($(this).attr('name') == "uname"){
						if(!unameVerify.test(content)){
							flag = false;
							return;
						}
						flag = true;
					}
					if($(this).attr('name') == "email"){
						if(!emailVerify.test(content)){
							flag = false;
							return;
						}
						flag = true;
					}
				})
				return flag;
			})
			
			$('input:not([type="submit"])').on({
				focus:function(){
					if($(this).attr("name") == "uname"){
						$(this).next().text("数字+字母6~12位");
						$(this).next().css("color","#b0b0b0");
					}
					if($(this).attr("name") == "email"){
						$(this).next().text("邮箱格式：xxx@xx.cn/com");
						$(this).next().css("color","#b0b0b0");
					}
				},
				blur:function(){
					let content = $(this).val()
					if($(this).attr("name") == "uname"){
						if(!unameVerify.test(content)){
							$(this).next().text("用户名格式不正确");
							$(this).next().css("color","red");
						}
					}
					if($(this).attr("name") == "email"){
						if(!emailVerify.test(content)){
							$(this).next().text("邮箱格式不正确");
							$(this).next().css("color","red");
						}
					}
				}
			})
		</script>
	</body>
</html>