今天总结了一下正则表达式的用法，以及输入框失去焦点的事件，具体效果如下：
一、下面来看下具体代码吧
1、先写出几个输入框，然后，在input里写一个失去焦点的事件方法οnblur=“ ”,以及ID，HTML代码如下：
–注：placeholder：起到输入框的提示字符作用
<table align="center">
<tr>
<th>用户名：</th>
<td><input type="text" id="name" placeholder="请输入以大写字母开头6-20位（数字/字母/下划线）" size="40px" onblur="nameBlur()" /></td>
<td><span id="nameReg"></span></td>
</tr>
<tr>
<th>密码：</th>
<td><input type="text" id="pwd" placeholder="请输入以大写开头 数字字母符号混合 8-15位" size="40px" onblur="pwdBlur()" /></td>
<td><span id="pwdReg"></span></td>
</tr>
<tr>
<th>确认密码：</th>
<td><input type="text" id="affirmPwd" placeholder="请输入以大写开头 数字字母符号混合 8-15位" size="40px" onblur="affirmPwdBlur()" /></td>
<td><span id="affirmPwdReg"></span></td>
</tr>
<tr>
<th>邮箱：</th>
<td><input type="text" id="mail" placeholder="请输入邮箱标准格式（数字/字母@数字/字母.com）" size="40px" onblur="mailBlur()" /></td>
<td><span id="mailReg"></span></td>
</tr>
<tr>
<th>手机号：</th>
<td><input type="text" id="phone" placeholder="请输入正确格式的手机号" size="40px" onblur="phoneBlur()" /></td>
<td><span id="phoneReg"></span></td>
</tr>
<tr>
<th>身份证号：</th>
<td><input type="text" id="cardNum" placeholder="请输入正确格式的身份证号" size="40px" onblur="cardNumBlur()" /></td>
<td><span id="cardNumReg"></span></td>
</tr>
<tr>
<th>地址：</th>
<td><input type="text" id="address" placeholder="请输入地址（中文开头 数字/字母/中文 混合）" size="40px" onblur="addressBlur()" /></td>
<td><span id="addressReg"></span></td>
</tr>
</table>
2.接下来就是js代码了
这里我学到了一个简单地方法，就是通过一个自定义的方法来实现获取input的ID，以及正则表达式的判断，代码如下：
<script type="application/javascript">
//写一个getText（inputId,reg）方法来判断 正则表达式
function getText(inputId, reg) {
var text = document.getElementById(inputId).value; //获取输入框的ID 存放到text变量中
var verify = reg; //获取正则表达式 存放到verify变量中
var result = verify.test(text.trim()); //判断输入框内容是否符合 正则表达式
var show = document.getElementById(inputId + "Reg"); //获取存放"√"和"×"文本的span标签ID
//如果符合正则表达式，则在输入框后面打"√"；否则打"×"
if(result && text != "") {
show.innerText = "√";
show.style.color = "green"; //设置"√"文本颜色为绿色
} else {
show.innerText = "×";
show.style.color = "red"; //设置"×"文本颜色为红色
}
}
3.然后通过调用上面的**getText(inputId, reg)**方法来实现每个输入框的正则表达式的判断，另（inputId：输入框的ID；reg：正则表达式）,具体调用方法代码如下：
//用户名输入框，失去焦点 的方法
function nameBlur() {
//调用getText（inputId,reg）方法
getText("name", /^[A-Z]{1}\w{5,19}$/);
}
//密码输入框，失去焦点 的方法
function pwdBlur() {
//调用getText（inputId,reg）方法
getText("pwd", /^[A-Z]{1}.{7,14}$/);
}
//确认密码输入框，失去焦点 的方法
function affirmPwdBlur() {
var pwd = document.getElementById("pwd").value; //获取密码输入框的内容
var affirmPwd = document.getElementById("affirmPwd").value; //获取确认密码输入框的内容
var affirmPwdReg = document.getElementById("affirmPwdReg"); //获取存放确认密码判断结果的 span标签 的ID
//如果确认密码和密码相等，调用getText（inputId,reg）方法，否则 "密码和确认密码不匹配"
if(affirmPwd == pwd) {
//调用getText（inputId,reg）方法
getText("affirmPwd", /^[A-Z]{1}.{7,14}$/);
} else {
affirmPwdReg.innerText = "密码和确认密码不匹配";
affirmPwdReg.style.color = "red";
}
}
//邮箱输入框，失去焦点 的方法
function mailBlur() {
//调用getText（inputId,reg）方法
getText("mail", /^[A-z0-9]+@[A-z0-9]+.com$/);
}
//手机号输入框，失去焦点 的方法
function phoneBlur() {
//调用getText（inputId,reg）方法
getText("phone", /^1[3-9]{1}\d{9}$/);
}
//身份证号输入框，失去焦点 的方法
function cardNumBlur() {
//调用getText（inputId,reg）方法
getText("cardNum", /^[1-9]{1}\d{17}$|^[1-9]{1}\d{16}(X|x)$/);
}
//地址输入框，失去焦点 的方法
function addressBlur() {
//调用getText（inputId,reg）方法
getText("address", /^[\u4e00-\u9fa5][0-9A-z\u4e00-\u9fa5]+$/);
}
</script>
二、总结
以上就是我刚学到正则表达式的知识，于是就整理了代码，写了这篇博客，希望可以帮助到大家，如有错误或不好的地方，还请告知，我会继续努力的，谢谢大家的观看！！！
–附：
代码里面的 正则表达式 可以根据自己想要的限制来写出自己想要的格式
扫下面二维码关注微信公众号 回复：js1016 领取源代码
