表单验证

最新推荐文章于 2022-09-02 01:04:56 发布

luo15256533579

最新推荐文章于 2022-09-02 01:04:56 发布

阅读量202

点赞数

分类专栏：表单验证文章标签：表单验证

本文链接：https://blog.csdn.net/luo15256533579/article/details/78561960

版权

表单验证专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>正则表达式</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
		}
		#top{
			width: 100%;
			height: 50px;
			background: #8B3A62;
			font-size: 20px;
			text-align: left;
			text-indent: 30px;
			line-height: 50px;
			color: white;
		}
		#content{
			width: 100%;
			background: #e2e2e2;
			height: 600px;
			overflow: hidden;
		}
		.wrap{
			width: 380px;
			height: 500px;
			margin: 50px auto;
		}
		td{
			height: 50px;
			color: gray;
		}
		.label{
			width: 80px;
			text-align: right;
			padding-right: 30px;
		}
		#btn{
			width: 380px;
			height: 100px;
			text-align: center;
		}
		button{
			width: 80px;
			height: 30px;
			margin-top: 50px;
			border: none;
			background: #8B3A62;
			color: white;
			box-shadow: 0 0 1px 2px gray ;
			border-radius: 5px;
			font-size: 18px;
		}
		.check{
			width: 100px;
			padding-left: 20px;
			color: red;
			font-size: 12px;
		}
		input{
			height: 25px;
			border: none;
			width: 160px;
			box-shadow: 0 0 1px 1px gray; 
		}
		select{
			width: 160px;
			height: 25px;
		}
	</style>
</head>
<body>
<div id="top">用户注册</div>
<div id="content">
	<div class="wrap">
		<table>
			<tr>
				<td class="label">用户名</td>
				<td><input type="text" name="username"></td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">密码</td>
				<td><input type="text" name="password"></td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">确认密码</td>
				<td><input type="text" name="repassword"></td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">姓名</td>
				<td><input type="text" name="name"></td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">性别</td>
				<td>
					<select>
						<option>男</option>
						<option>女</option>
					</select>
				</td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">身份证号</td>
				<td><input type="text" name="idCard"></td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">邮箱</td>
				<td><input type="text" name="mail"></td>
				<td class="check"></td>
			</tr>
			<tr>
				<td class="label">手机号</td>
				<td><input type="text" name="tele"></td>
				<td class="check"></td>
			</tr>
		</table>
		<div id="btn"><button id="subbtn">提交</button></div>
	</div>
</div>
<script type="text/javascript">
	(function(){
		var usernamePattern=/^[a-zA-Z]\w{5,19}$/;
		var username=document.getElementsByName('username')[0];
		username.οnblur=function(){
			if(usernamePattern.test(username.value)){
				username.parentNode.nextElementSibling.innerHTML='ok';
			}else if(/^[^a-zA-Z]/.test(username.value)){
				username.parentNode.nextElementSibling.innerHTML='以字母开头';
			}else{
				username.parentNode.nextElementSibling.innerHTML='6-20位';
			}
		}
	})();
	(function(){
		var passwordPattern=/^[^\s]{6,18}$/;
		var password=document.getElementsByName('password')[0];
		password.οnblur=function(){
			if(passwordPattern.test(password.value)){
				password.parentNode.nextElementSibling.innerHTML='ok';
			}else if(/\s/.test(password.value)){
				password.parentNode.nextElementSibling.innerHTML='不能有空格';
			}else{
				password.parentNode.nextElementSibling.innerHTML='6-18位';
			}
		}
	})();
	(function(){
		var password=document.getElementsByName('password')[0];
		var repassword=document.getElementsByName('repassword')[0];
		repassword.οnblur=function(){
			if(repassword.value!=password.value||password.value==''){
				repassword.parentNode.nextElementSibling.innerHTML='密码不一致';
			}else{
				repassword.parentNode.nextElementSibling.innerHTML='ok';
			}
		}
	})();
	(function(){
		var namePattern=/^[\u4e00-\u9fa5]{2,4}$/;
		var name=document.getElementsByName('name')[0];
		name.οnblur=function(){
			if(namePattern.test(name.value)){
				name.parentNode.nextElementSibling.innerHTML='ok';
			}else{
				name.parentNode.nextElementSibling.innerHTML='2-4位汉字';
			}
		}
	})();
	(function(){
		var idCardPattern=/^\d{14}$|^\d{17}[\dx]$/;
		var idCard=document.getElementsByName('idCard')[0];
		idCard.οnblur=function(){
			if(idCardPattern.test(idCard.value)){
				idCard.parentNode.nextElementSibling.innerHTML='ok';
			}else{
				idCard.parentNode.nextElementSibling.innerHTML='格式不正确';
			}
		}
	})();
	(function(){
		var mailPattern=/^\w+([.\-_]\w+)*@\w+(\.\w+)+$/;
		var mail=document.getElementsByName('mail')[0];
		mail.οnblur=function(){
			if(mailPattern.test(mail.value)){
				mail.parentNode.nextElementSibling.innerHTML='ok';
			}else{
				mail.parentNode.nextElementSibling.innerHTML='格式不正确';
			}
		}
	})();
	(function(){
		var telePattern=/^(13[0-9]|15[0-3,5-9]|18[0,2,5-9]|147)\d{8}$/;
		var tele=document.getElementsByName('tele')[0];
		tele.οnblur=function(){
			if(telePattern.test(tele.value)){
				tele.parentNode.nextElementSibling.innerHTML='ok';
			}else{
				tele.parentNode.nextElementSibling.innerHTML='格式不正确';
			}
		}
	})();
	function btn(){
		var inputList=document.getElementsByTagName('input');
		console.log(inputList);
		for(var i=0;i<inputList.length;i++){
			if(inputList[i].parentNode.nextElementSibling.innerHTML!='ok'){
				alert('请填写正确后提交');
				return;
			}
		}
		alert('提交成功');
	}
	document.getElementById('subbtn').οnclick=btn;
</script>
</body>
</html>