用正则校验form表单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		input{margin-top: 10px;}
		span{color: red;font-size: 12px;display: none;}
		.one{width: 80px;height: 25px;background: #d1d1d1;border: none;border: 1px solid #ccc;border-radius: 2px;}
		.two{width: 80px;height: 25px;background: skyblue;border: none;border: 1px solid #ccc;border-radius: 2px;}
	</style>
</head>
<body>
	<form action="success.html" method="get" onsubmit="return filter()">
		<h2>用户注册</h2>
		<label for="">用&nbsp;户&nbsp;名：&nbsp;&nbsp;</label><input type="text" id="txt-name"><span id="tip-name">*用户名为8-12字母或数字(不能使用数字开头)</span><br>
		<label for="">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="txt-pwd"><span id="tip-pwd">*密码为6位数字</span><br>
		<label for="">确认密码：</label><input type="password" id="txt-pwd1"><span id="tip-pwd1">*两次输入的密码不一致</span><br>
		<label for="">手机号码：</label><input type="text" id="txt-tel"><span id="tip-tel">*手机号码不正确</span><br>
		<input type="checkbox" id="cbx">同意《xxxxx安保协议》<br>
		<input type="submit" value="注册" class="one" disabled id="btn-sub">
	</form>

	<script type="text/javascript">
		var cbx=document.getElementById('cbx');//协议
		var btn=document.getElementById('btn-sub');

		var txtName=document.getElementById('txt-name');
		var tipName=document.getElementById('tip-name');
		var txtPwd=document.getElementById('txt-pwd');
		var tipPwd=document.getElementById('tip-pwd');
		var txtPwd1=document.getElementById('txt-pwd1');
		var tipPwd1=document.getElementById('tip-pwd1');
		var txtPhone=document.getElementById('txt-tel');
		var tipPhone=document.getElementById('tip-tel');
		
		setCbx(cbx);//页面加载时，根据复选框状态设置按钮状态
		//复选框改变事件
		cbx.onchange=function () {
			setCbx(this);
		};

		//设置复选框
		function setCbx(obj){
			//判断，若为勾中状态，则提交按钮可用
			if(obj.checked){
				btn.className='two';
				btn.disabled=false;
			}else{
				btn.className='one';
				btn.disabled=true;
			}	
		}

		//校验表单数据
		function filter(){
			//分别校验 用户名、密码、手机号
			return filterUserName()&&filterPwd()&&filterTel();
		}

		//校验用户名
		function filterUserName(){
			var sName=txtName.value;
			var p=/^[a-zA-Z]\w{7,11}$/;
			//校验不通过
			if(!p.test(sName)){
				tipName.style.display='inline-block';
				txtName.focus();//获取焦点				
				return false;
			}
			return true;
		}

		//校验密码
		function filterPwd(){
			var pwd=txtPwd.value;//读取输入框值
			var p=/^\d{6}$/;

			var pwd1=txtPwd1.value;
			//校验密码
			if(!p.test(pwd)){
				tipPwd.style.display='inline-block';
				txtPwd.focus();
				return false;
			}
			//两次密码是否一致
			if(pwd!=pwd1){
				tipPwd1.style.display='inline-block';
				txtPwd1.focus();
				return false;
			}
			return true;
		}

		//校验手机号
		function filterTel(){
			var tel=txtPhone.value;
			var p=/^1\d{10}$/;
			if(!p.test(tel)){
				tipPhone.style.display='inline-block';
				txtPhone.focus();
				return false;
			}
			return true;
		}
	</script>
</body>
</html>
用正则校验form表单

猜你喜欢
