版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
HTML代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="verify.js"></script>
<style type="text/css">
#div{
margin-top: 40px;
margin-left: 1800px;
font-size: 50px;
height: 40px;
}
#btn{
width: 500px;
height:120px;
font-size: 40px;
margin-left:2000px ;
background-color: #E9E9E9;
border-radius: 15px;
border:1px solid #000
}
.input{
font-size: 50px;
width: 500px;
height: 60px;
border-radius: 15px;
border:1px solid #000;
background: #FCFBF9;
}
#body{
background-image: url(timg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body id="body">
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="div">用 户 名：
<input class="input" type="text" id="userName" onblur="regName()" />
<span id="userNameReg"></span>
</div>
<br />
<div id="div">密 码：
<input class="input" type="password" id="pwd" onblur="regpwd()" />
<span id="pwdReg"></span>
</div>
<br />
<div id="div">确认密码：
<input class="input" type="password" id="conpwd" onblur="regconpwd()"/>
<span id="conpwdReg"></span>
</div>
<br />
<div id="div">邮 箱：
<input class="input" type="text" id="mailbox" onblur="regmailbox()" />
<span id="mailboxReg"></span>
</div>
<br />
<div id="div">手 机 号：
<input class="input" type="text" id="cellphone" onblur="regphone()" />
<span id="cellphoneReg"></span>
</div>
<br />
<div id="div">身份证号：
<input class="input" type="text" id="identity" onblur="regidentity()" />
<span id="identityReg"></span>
</div>
<br />
<div id="div">地 址：
<input class="input" type="text" id="address" onblur="regaddress()" />
<span id="addressReg"></span>
</div>
<br /><br /><br />
<div><input id="btn" type="button" onmouseover="chengColor('red')"
onmouseout="chengColor('#000')" value="校验" onclick="regbtn()"/></div>
<script type="text/javascript">
//改变but字体颜色
function chengColor(color){
document.getElementById("btn").style.color=color;
}
//判断用户名
function regName(){
var userNameRule = /^[A-Z]{1}[A-Za-z_]{5,19}/;
reg("userName",userNameRule);
// return true;
}
//判断密码
function regpwd(){
var pwdRule=/^[A-Z][A-z0-9\.]{7,14}$/;
reg("pwd",pwdRule);
// return true;
}
//确认密码
function regconpwd(){
var conpwdRule=/^[A-Z][A-z0-9\.]{7,14}$/;
reg("conpwd",conpwdRule);
return true;
}
//判断邮箱格式
function regmailbox(){
var mailboxRule =/^[A-z0-9]+@[A-z0-9]+\.[a-z]{1,3}$/;
reg("mailbox",mailboxRule);
return true;
}
//判断手机号格式
function regphone(){
var cellphoneRule =/0?(13|14|15|18|17|19)[0-9]{9}/;
reg("cellphone",cellphoneRule );
}
//判断身份证格式
function regidentity(){
var identityCard = /^[1-9]{1}[0-9]{17}$|[1-9]{1}[0-9]{16}(X|x)$/;
reg("identity",identityCard);
return true;
}
//判断地址格式
function regaddress() {
var addressCard =/^[\u4e00-\u9fa5][A-z0-9]+$/;
reg("address",addressCard);
return true;
}
//实现校验按钮
function regbtn(){
if(document.getElementById("userNameReg").value=='√'&&
document.getElementById("pwdReg").value=='√'&&
document.getElementById("conpwdReg").value=='√'&&
document.getElementById("mailboxReg").value=='√'&&
document.getElementById("cellphoneReg").value=='√'&&
document.getElementById("identityReg").value=='√'&&
document.getElementById("addressReg").value=='√'
){
alert("注册成功");
}else{
alert("注册失败");
}
}
</script>
</body>
</html>
js代码
function reg(eleID, rule){
var inputValue = document.getElementById(eleID).value;
var result = rule.test(inputValue.trim());
if (result && inputValue != ""){
document.getElementById(eleID+"Reg").innerHTML = "√";
document.getElementById(eleID+"Reg").style.color = "green";
}else {
document.getElementById(eleID+"Reg").innerHTML = "×";
document.getElementById(eleID+"Reg").style.color = "red";
}
}