正则的运用 -- 常用表单验证

最新推荐文章于 2020-11-04 01:06:18 发布

叶子_o

最新推荐文章于 2020-11-04 01:06:18 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

分类专栏：正则

本文链接：https://blog.youkuaiyun.com/xiamoziqian/article/details/87695655

正则专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了一个包含用户名、密码、手机号、邮箱、姓名、性别及数字输入的表单验证实例，涵盖了正则表达式验证和事件监听，确保了前端数据的有效性和格式正确性。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用表单验证</title>
</head>
<body>
	<form id="oForm" action="#" method="post">
		<p>用户名：<input type="text" id="userName"><span id="s1"></span></p>
		<p>密码：<input type="text" id="psw"><span id="s2"></span></p>
		<p>手机号：<input type="text" id="phone"><span id="s3"></span></p>
		<p>邮箱：<input type="text" id="mail"><span id="s4"></span></p>
		<p>姓名：<input type="text" id="cname"><span id="s5"></span></p>
		<p>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<span id="s6"></span></p>
		<p>数字：<input type="text" id="num"><span id="s7"></span></p>
		<p><input type="submit" value="提交"></p>
	</form>
	<script>
		function $(id) {
			return document.getElementById(id);
		}

		// 验证用户名  3-6位的字母、数字、下划线
		var flagName = null;
		$("userName").onblur = function(){
			var reg = /^\w{3,6}$/;
			if(!reg.test(this.value)) {
				$("s1").innerHTML = "用户名不合法";
				flagName = false;
			}else{
				$("s1").innerHTML = "合法";
				flagName = true;
			}
		}
		// 验证密码 至少6位
		var flagPsw = null;
		$("psw").onblur = function(){
			var reg = /^.{6,}$/;
			if(!reg.test(this.value)){
				$("s2").innerHTML = "密码不合法";
				flagPsw = false;
			}else{
				$("s2").innerHTML = "合法";
				flagPsw = true;
			}
		}
		// 验证手机号 以1开头的11位数字
		var flagPhone = null;
		$("phone").onblur = function(){
			var reg = /^1\d{10}$/;
			if(!reg.test(this.value)){
				$("s3").innerHTML = "请输入正确的手机号";
				flagPhone = false;
			}else{
				$("s3").innerHTML = "格式正确";
				flagPhone = true;
			}
		}
		// 验证邮箱 用户名：字母、数字、下划线、-、.、不能以.或-开头，不能连续.或-
		var flagMail = null;
		$("mail").onblur = function(){
			var reg = /^\w+([.-]\w+)*@[a-zA-Z0-9]+([-.][a-zA-Z0-9]+)(\.[a-zA-Z0-9])+$/;
			if(!reg.test(this.value)){
				if(!reg.test(this.value)){
					$("s4").innerHTML = "邮箱格式有误";
					flagMail = false;
				}else{
					$("s4").innerHTML = "格式正确";
					flagMail = true;
				}
			}
		}
		//验证中文姓名  中文汉字、***.***
		var flagCname = null;
		$("cname").onblur = function(){
			var reg = /^[\u4e00-\u9fa5]{2,}(·[\u4e00-\u9fa5]{2,})?$/;
			if(!reg.test(this.value)){
				$("s5").innerHTML = "姓名格式有误";
				flagCname = false;
			}else{
				$("s5").innerHTML = "格式正确";
				flagCname = true;
			}
		}
		// 验证性别
		function checkSex(){
			var sexy = document.getElementsByName("sex");
			for(var i=0; i<sexy.length; i++){
				if(sexy[i].checked){
					return true;
				}
			}
			$("s6").innerHTML = "请选择性别";
			return false;
		}
		// 验证有效数字 + - 小数点 第一位非0
		var flagNum = null;
		$("num").onblur = function(){
			var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;
			if(!reg.test(this.value)){
				$("s7").innerHTML = "数字无效";
				flagNum = false;
			}else{
				$("s7").innerHTML = "格式正确";
				flagNum = true;
			}
		}

		// 为提交按钮绑定事件
		$("oForm").onsubmit = function(){
			if(flagName && flagPsw && flagPhone && flagMail && flagCname && flagNum && checkSex()){
				return true;
			}
			return false;
		}
	</script>
</body>
</html>