运用正则做简单的表单验证

最近在研究正则，总结一下学习正则的经验，运用正则做一个简单的表单验证，源代码demo。其中用到了邮箱、电话、年龄以及用户名的验证，为了表单的可拓展性，把每一个验证做到了json中，如下：

var json={
mail: 	/^\w+@\w+\.[a-zA-Z]{2,3}\.[a-zA-Z]{1,2}$/,
tel:	/^(0[1-9]\d{1,2}-?)?[1-9]\d{6,7}$/,
age:	/^(1[6-9]|[2-9]\d|100)$/,
user:	/^[\u4e00-\u9fa5]+$/
};

其中邮箱前面的可以为字母、数字、下划线用\w然后@后面也可以是字母数字下划线，再然后就是.后面可以是大小写字母，可以是2-3位，然后又一个点号，后面的也可以是大小写字母1-2位以^开头和$结尾；其中电话中第一位需要时0，第二位是1-9，然后是第三位是0-9就用\d可以是1-2位，接下来是一个-，因为其可有可无，就用？然而前面的区号部分整体可有可无，就需要总体加一个？，后面的就是电话号了，第一位需要是1-9的数字后面的数字可以是0-9的数字6-7位；然后就是年龄验证，分为三个年龄阶段：1.16-19岁
2.20-99岁 3.100岁   其中16-19可以写作1[6-9],然后20-99可以写作[2-9]\d ,然后就是100岁，因为这三个年龄段是单独出现的，需要在三个中加入|表示或。

然后用json做正则验证的好处就是拓展性比较好，如果想在页面上添加其他的表单验证只需要在json中加入规则就可以了。

表单部分主体如下：

<form action="http://www.baidu.com" id="fm">
邮箱:<input type="text" id="mail" name="mail" value="chen@qq.com.cn"><br>
电话:<input type="text" id="tel" name="tel" value="027-87654321"><br>
年龄:<input type="text" id="age" name="age" value="18"><br>
用户名:<input type="text" id="user" name="user" value="大帅哥"><br>
<input type="submit" value="提交" id="btn1">
</form>

需要表单的每一项中的name与json中的键一致，这样就可以通过表单中的name属性获取json中要获取的规则如var re = json[aIpt[i].name];这样就可以获取每一个选项中的验证规则。然后就是js操作验证部分。

oFm.onsubmit=function(){

var bOk=true;//假设校验合格

for(var i=0;i<aIpt.length;i++){
if(aIpt[i].name){//有name属性再向下走
var re = json[aIpt[i].name];
if(!check(re,aIpt[i])){//校验后如果返回false
bOk=false;
}
}
}

if(bOk==false){//如果校验不合格
return false;
}

};

这部分是当表单提交的时候获取验证，可以先假设校验合格var bOk=true，调用验证函数，遍历所有input当校验后返回假，则说明没有校验成功使bOk=false,然后判断bOk的值，如果为假，则阻止默认事件，阻止表单提交。

验证函数：

function check(re,oIpt){
if(!re.test(oIpt.value)){
oIpt.className='error';
return false;
}else{
oIpt.className='ok';
return true;
}
}

其中需要传入两个参数，re规则，以及要验证的对象，如果输入的值没有验证成功则，则是输入框变为红色，如果正确的话变为绿色。

做到这里简单的表单验证就做好了，然而所有都填完了提交的时候会发现，第一个不正确，当第一个修改后提交了会发现第二个又不正确，如果遇到比较大的表单，估计用户会疯掉的，于是新需求就出来了，能不能填完一个，就验证出是否出错了呢？答案是肯定的，这时需要对单个进行校验，当鼠标失焦的时候验证对错。可以在代码中增加下面这一段。

for(var i=0;i<aIpt.length;i++){
if(aIpt[i].name){
var re = json[aIpt[i].name];
(function(re){
aIpt[i].onblur=function(){
check(re,this);
};
})(re);
}
}

遍历每一个input当某个输入框失焦的时候判断对错，其中输入框还不能是submit输入框，所以就要判断是否aIpt[i]有name属性，然后再根据判断是否符合判断规则，然而这里的re不能直接使用，就需要封闭空间传一个re进行判断，调用check函数，再根据check判断出输入框的样式。