怎么JavaScript中利用正则表达式提交页面验证

tangjin

作者

今天就跟大家聊聊有关怎么JavaScript中利用正则表达式提交页面验证，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

<!DOCTYPEhtml>
<html>

	<headlang="en">
		<metacharset="UTF-8">
		<title></title>
	</head>

	<body>
		用户名：
		<inputtype="text"name="Name"id="Name"/><br/>
		密码：
		<inputtype="text"name="pwd"id="pwd"/><br/>
		确认密码：
		<inputtype="text"name="disPwd"id="disPwd"/><br/>
		邮箱：
		<inputtype="text"name="email"id="email"/><br/>
		手机号：
		<inputtype="text"name="phone"id="phone"/><br/>
		身份证号：
		<inputtype="text"name="ID"id="ID"/><br/>
		地址：
		<inputtype="text"name="address"id="address"/><br/>
		<inputtype="button"value="验证"onclick="verification()"/>

		<scripttype="text/javascript">
			functionverification(){

				varName=document.getElementById("Name").value;
				varpwd=document.getElementById("pwd").value;
				vardisPwd=document.getElementById("disPwd").value;
				varemail=document.getElementById("email").value;
				varphone=document.getElementById("phone").value;
				varidNumber=document.getElementById("ID").value;
				varaddress=document.getElementById("address").value;

				varNameRule=/^[A-Z][A-z0-9_]{5,19}$/;
				varpwdRule=/^[a-zA-Z]\w{7,14}$/;
				vardisPwdRule=/^[a-zA-Z]\w{7,14}$/;
				varemailRule=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				varphoneRule=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				varidNumberRule=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				varaddressRule=/^[\u4E00-\u9FA5A-Za-z0-9_]+$/;

				if(NameRule.test(user.trim())){
					if(pwdRule.test(pwd.trim())){
						if(disPwdRule.test(disPwd.trim())){
							if(emailRule.test(email.trim())){
								if(phoneRule.test(phone.trim())){
									if(idNumberRule.test(idNumber.trim())){
										if(addressRule.test(address.trim())){
											alert("验证成功");
										}else{
											alert("地址不合法");
										}
									}else{
										alert("身份证号不合法");
									}
								}else{
									alert("手机号不合法");
								}
							}else{
								alert("邮箱不合法");
							}
						}else{
							alert("确认密码不合法");
						}
					}else{
						alert("密码不合法");
					}
				}else{
					alert("用名不合法");
				}
			}
		</script>

	</body>

</html>

4：效果图