<!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="">用 户 名: </label><input type="text" id="txt-name"><span id="tip-name">*用户名为8-12字母或数字(不能使用数字开头)</span><br>
<label for="">密 码:</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>