js正则表达式之表单校验

要求
输入内容全部符合正则表达式要求才可以提交成功!

代码实现

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		用户名:<input type="text" onblur="ob(0)" /><span></span><br />
		密码:<input type="text" onblur="ob(1)" /><span></span><br />
		确认密码:<input type="text" onblur="ob(2)" /><span></span><br />
		邮箱: <input type="text" onblur="ob(3)" /><span></span><br />
		手机号:<input type="text" onblur="ob(4)" /><span></span><br />
		身份证号:<input type="text" onblur="ob(5)" /><span></span><br />
		地址:<input type="text" onblur="ob(6)" /><span></span><br />
		<input type="button" onclick="on()" value="提交" /><br />
	</body>
	<script>
		function verify(str, expression, s) {
			var b = expression.test(str);
			if (b) {
				s.innerHTML = "√";
			} else {
				s.innerHTML = "x";
			}
		}


		function ob(a) {
			var ipt = document.getElementsByTagName("input");
			var s = document.getElementsByTagName("span");

			var expression0 = /^[A-Z][A-z]{5,19}$/ //用户名
			var expression1 = /^[A-Z][A-z0-9]+/ //密码
			var expression2 = /^[A-Z][A-z0-9]+/ //确认密码
			var expression3 = /^[0-9A-z]+@+[A-z0-9]+.com$/ //邮箱
			var expression4 = /^1[3584]\d{9}$/ //手机号
			var expression5 = /^[1-9][0-9]{16}[A-z0-9]/ //身份证号
			var expression6 = /^[A-Z][A-z|_]{6,19}/ //地址

			switch (a) {
				case 0:
					verify(ipt[0].value, expression0, s[0]);
					break;
				case 1:
					verify(ipt[1].value, expression1, s[1]);
					break;
				case 2:
					verify(ipt[2].value, expression2, s[2]);
					break;
				case 3:
					verify(ipt[3].value, expression3, s[3]);
					break;
				case 4:
					verify(ipt[4].value, expression4, s[4]);
					break;
				case 5:
					verify(ipt[5].value, expression5, s[5]);
					break;
				case 6:
					verify(ipt[6].value, expression6, s[6]);
					break;
			}
		}
		
		function on(){
			var s = document.getElementsByTagName("span");
			for(var i = 0; i < s.length;i++){
				if(s[i].innerText == '√'){
					if(i == 6){
						alert("提交成功");
					}else{
						continue;
					}
				}else{
					alert("提交失败");
					break;
				}
			}
		}
	</script>
</html>

发布了30 篇原创文章 · 获赞 39 · 访问量 2073

猜你喜欢

转载自blog.csdn.net/weixin_44564242/article/details/102594528