辛苦老师检查下

来源：4-8 编程练习

Lanny_Chung

2020-05-24 22:09:02

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>正则表达式</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 800px;
			height: 600px;
			margin: 0 auto;
			background-color: #eee;
			border-radius: 3px;
		}
		.nav{
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-indent: 1em;
			color: #fff;
			background-color:#3092D1; 
		}
		section{
			margin-left: 200px;
		}
		ul{
			list-style-type: none;
			margin-top: 40px;
		}
		ul>li{
			height: 40px;
		}
		.toRight{
			display: inline-block;
			text-align: right;
			width: 100px;
			color:#656565;
		}
		input,select{
			width:160px;
			text-align: left;
		}
		div{
			width: 80px;
			height: 40px;
			line-height: 40px;
			margin:60px 0 0 130px;
			background-color: #3082d1;
			text-align: center;
			border-radius: 5px;
			cursor: pointer;
			color:#fff;
		}
		.tips{
			margin-left: 10px;
			color:red;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<article class="container">
		<nav class="nav">用户注册</nav>
		<section>
			<ul>
				<li class="change">
					<span class="toRight">用户名：</span><input class="userName" type="text" name="userName" title="^[a-zA-Z]\w{5,19}$"><span class="tips"></span>
				</li>
				<li class="change">
					<span class="toRight">登录密码：</span><input class="password1" type="password" name="password1" title="^\S{6,18}$"><span class="tips"></span>
				</li>
				<li class="change">
					<span class="toRight">确认密码：</span><input class="password2" type="password" name="password2"><span class="tips"></span>
				</li>
				<li class="change">
					<span class="toRight">姓名：</span><input type="name" name="name" title="^[\u4e00-\u9fa5]{2,4}$"><span class="tips"></span>
				</li>
				<li>
					<span class="toRight">性别：</span>
					<select class="sex">
						<option selected>男</option>
						<option>女</option>
						<option>保密</option>
					</select>
				</li>
				<li class="change">
					<span class="toRight">身份证号码：</span><input type="text" name="idCard" title="^[1-9]\d{16}[\dx]$"><span class="tips"></span>
				</li>
				<li class="change">
					<span class="toRight">邮箱：</span><input type="text" name="email" title="^[a-zA-Z]+\w+@[\w]+\.([a-zA-Z]){2,6}$"><span class="tips"></span>
				</li>
				<li class="change">
					<span class="toRight">手机号码：</span><input type="text" name="phone" title="^1(?:3[\d]|5[\d]|8[\d]|47)\d{8}$"><span class="tips"></span>
				</li>
			</ul>
			<div class="btn">提交</div>
		</section>
	</article>
	<script type="text/javascript">
		var lists=document.querySelectorAll(".change"),
			tips=document.querySelectorAll(".tips"),
			userName=document.querySelector(".userName"),
			password1=document.querySelector(".password1"),
			password2=document.querySelector(".password2"),
			newErrors={
				userName:"6-20位字母、数字或“_”,字母开头",
				password1:"6-18位，包括数字字母或符号，中间不能有空格",
				password2:"两次输入密码不一致",
				name:"真实姓名，两位到四位的中文汉字",
				idCard:"请填写正确的18位身份证号码",
				email:"邮箱格式不正确",
				phone:"电话号码不正确"
			},
			verification,
			btn=document.querySelector(".btn");
		for(var i=0;i<lists.length;i++){
			lists[i].addEventListener("blur",function(){
				if (this.children[1].value.search(this.children[1].title)!=-1) {
					this.children[2].innerHTML="ok";
					verification=true;
				}else{
					this.children[2].innerHTML=newErrors[this.children[1].name];
					verification=false;
				}
				if (this.children[1].name=="password2" && password1.value!=password2.value) {
					tips[2].innerHTML=newErrors.password2;
				}
			},true)
		}
		btn.onclick=function(){
			var sum=-1;
			if (verification) {
				alert("验证成功");
			}else{
				for(var k in newErrors){
					sum++;
					tips[sum].innerHTML=newErrors[k];
				}
				tips[2].innerHTML="请输入密码";
			}
		}
	</script>
</body>
</html>

写回答

1回答