版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1…失去焦点后验证
首先设计文本框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="verify.js"></script>
<style type="text/css">
.input{
font-size: 10px;
width: 200px;
height: 20px;
}
</style>
</head>
<center>
<br />
<h3>验 证</h3>
<br /><br />
<div>用 户 名：
<input class="input" type="text" id="userName" onblur="regName()" />
<span id="userNameReg"></span>
</div>
<br />
<div>密 码：
<input class="input" type="password" id="pwd" onblur="regpwd()" />
<span id="pwdReg"></span>
</div>
<br />
<div>确认密码：
<input class="input" type="password" id="conpwd" onblur="regconpwd()"/>
<span id="conpwdReg"></span>
</div>
<br />
<div>邮 箱：
<input class="input" type="text" id="mailbox" onblur="regmailbox()" />
<span id="mailboxReg"></span>
</div>
<br />
<div>手 机 号：
<input class="input" type="text" id="cellphone" onblur="regphone()" />
<span id="cellphoneReg"></span>
</div>
<br />
<div>身份证号：
<input class="input" type="text" id="identity" onblur="regidentity()" />
<span id="identityReg"></span>
</div>
<br />
<div>地 址：
<input class="input" type="text" id="address" onblur="regaddress()" />
<span id="addressReg"></span>
</div>
</center>
<script type="text/javascript">
//改变but字体颜色
function Color(color){
document.getElementById("btn").style.color=color;
}
//判断用户名
function regName(){
var userNameRule = /^[A-Z]{1}[A-Za-z_]{5,19}/;
reg("userName",userNameRule);
}
//判断密码
function regpwd(){
var pwdRule=/^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
reg("pwd",pwdRule);
}
//确认密码
function regconpwd(){
var conpwdRule=/^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
reg("conpwd",conpwdRule);
}
//判断邮箱格式
function regmailbox(){
var mailboxRule =/^[A-Z0-9]+@[a-z0-9]+.com$/;
reg("mailbox",mailboxRule);
}
//判断手机号格式
function regphone(){
var cellphoneRule =/^[1][3,4,5,6,7,8][0-9]{9}$/;
reg("cellphone",cellphoneRule );
}
//判断身份证格式
function regidentity(){
var identityCard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
reg("identity",identityCard);
}
//判断地址格式
function regaddress() {
var addressCard =/^[\u4e00-\u9fa5][A-z0-9]+$/;
reg("address",addressCard);
}
</script>
</body>
</html>
2…创建 JS JavaScript verify
/**
* Created by Administrator on 2019/10/12.
*/
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";
}
}
