**利用传参的方式提高方法的复用性
这里涉及到JavaScript的字符串拼接操作
这是图片展示的效果:
下面是全部代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="verify.js"></script>
<style type="text/css">
.input{
font-size: 20px;
width: 300px;
height: 30px;
}
</style>
</head>
<center>
<br /><br /><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 chengColor(color){
document.getElementById("btn").style.color=color;
}
//判断用户名 大写字母开头 6-20位字符(不允许有符号但是允许有_)
function regName(){
var userNameRule = /^[A-Z]{1}[A-Za-z_]{5,19}/;
reg("userName",userNameRule);
}
//判断密码 大写开头 数字字母符号混合 8-15位
function regpwd(){
var pwdRule=/^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
reg("pwd",pwdRule);
}
//确认密码 大写开头 数字字母符号混合 8-15位
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>