哈喽我又来咯~
这次带来的是JavaScript判断输入框失去焦点判断是否满足正则表达式~
- 还是先看效果咯
- 看完效果是不是有点小心动~不要着急现在就是大家所关心的关键咯
- 我们还是先看HTMl 的代码段
用户名:<br/><input type="text" id="name" onblur="verName()"/><span id="nameReg"></span><br/>
密码:<br/><input type="text" id="pwd" onblur="verPwd()"/><span id="pwdReg"></span><br/>
确认密码:<br/><input type="text" id="pwd2" onblur="verPwd2()"/><span id="pwd2Reg"></span><br/>
邮箱:<br/><input type="text" id="mailbox" onblur="verMailbox()"/><span id="mailboxReg"></span><br/>
手机号:<br/><input type="text" id="phone" onblur="verPhone()"/><span id="phoneReg"></span><br/>
地址:<br/><input type="text" id="address" onblur="verAddress()"/><span id="addressReg"></span><br/>
-
就是很基础的input的使用
-
下面是js 的代码段
<script type="text/javascript">
function verName() {
//用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
var limitierName = /^[A-Z]\w{5,19}$/;
reg("name", limitierName);
}
function verPwd() {
//密码:大写开头 数字字母符号混合 8-15位
var limitierPwd = /^[A-Z][\w\W]{7,14}$/;
reg("pwd", limitierPwd);
}
function verPwd2() {
//确认密码:大写开头 数字字母符号混合 8-15位
var limitierPwd2 = /^[A-Z][\w\W]{7,14}$/;
reg("pwd2", limitierPwd2);
}
function verMailbox() {
//邮箱:邮箱格式
var limitierMailbox = /^[A-z0-9]+@[a-z0-9]+.com$/;
reg("mailbox", limitierMailbox);
}
function verPhone() {
//手机号:手机号格式
var limitierPhone = /^(13|15|17|18)\d{9}$/;
reg("phone", limitierPhone);
}
function verAddress() {
//地址: 中文开头 数字 - 字母 中文混合
var limitierAddress = /^[\u4e00-\u9fa5][\u4e00-\u9fa5A-Za-z0-9]+$/;
reg("address", limitierAddress);
}
可以写到本页面的哦
到这里结束了吗 不不不 还有
* 输入框的校验 消息显示区域的ID 必须按照 eleId+"Reg"
* @param eleId 输入框的ID
* @param rule 正则表达式
*/
function reg(eleId,rule){
//动态的添加一个消息显示标签
var inputValue = document.getElementById(eleId).value;
var result = rule.test(inputValue.trim());
if(result){
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";
}
这是才是关键哦
判断是否满足正则表达式满足的话就会在后面显示对号哦~
到这里,这次的内容就真正结束了~
有什么疑问可以在下放评论
关注我不迷路~持续为大家带来一些精美的分享哦