用户注册表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44830974/article/details/89446802
<!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" "return filter()">
	<h2>用户注册</h2>
	<label for="">用&nbsp;户&nbsp;名：&nbsp;&nbsp;</label><input type="text" name="" id="txt-name"><span id="tip-name">*用户名位八到十二位字母或数字（不能使用数字开头）</span><br>
	<label for="">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：&nbsp;</label><input type="password" name=""><span>*密码为六位数字</span><br>
	<label>确认密码：</label><input type="password" name="" id="txt-pwd1"><span id="tip-pwd1">*两次输入的密码不一样</span><br>
	<label>手机号码：</label><input type="text" name="" id="txt-tel"><span id="tip-tel">*手机号码不正确</span><br>
	<input type="checkbox" name="" id="cbx">同意《xxx安保协议》<br>
	<input type="submit" value="注册" name="" class="one" disabled="" id="btn">
	</form>

	<script type="text/javascript">
		var cbx=document.getElementById('cbx');
		var btn=document.getElementById('btn');
		var txtName=document.getElementById('txt-name');
		var tipName=document.getElementById('tip-name');
		var txtPwd1=document.getElementById('txt-pwd1');
		var tipPwd1=document.getElementById('tip-pwd1');
		var txtTel=document.getElementById('txt-tel');
		var tipTel=document.getElementById('tip-tel');

		//页面加载时，根据复选框状态设置按钮状态
		setCbx(cbx);
		//复选框改变事件
		cbx.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';
			txtPwd1.focus();
			return false;
		}
		//两次输入的密码是否一致
		if (pwd!=pwd1) {
			tipPwd1.style.display='inline-block';
			tipPwd1.focus();
			return false;
		}
		return true;
	}

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