正则表达式验证表单

正则是用来描述字符规则的，常常用来做表单验证。先说下正则的创建和简单的使用吧！

/ / 是正则表达式的标识符

创建

1. 字面量创建　　 var  reg=/a/;
2. 构造函数创建　　var reg=new RegExp("a");

使用：不能直接使用，需配合方法使用

• 字符：

　　　　str.match(reg)

　　　　str.replace(reg)

•  正则：

　　　　reg.test(str)

特点

1. 筛选出符合条件的子串
2. 替换符合条件的子串
3. 验证字符是否符合规则

需注意正则中的修饰符，写在正则表达式后面／的后面：g表示全局匹配，查找所有；i表示忽略大小写。

正则的表达式较多，我就不列出了。

这个网站比较齐全，可以看下哈！http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

正则就介绍到这里，我做了一个表单验证来感受了下正则的写法。上代码一起感受下吧！

    var ouser = document.getElementById("user");
    var opass = document.getElementById("pass");
    var opass2 = document.getElementById("pass2");
    var obtn = document.getElementById("btn");

    // 提前定义每个输入框的成功状态：false为失败，true为成功
    var u = p = p2 = false;

    // 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    ouser.onblur = function(){
        var reg = /^[u2E80-u9FFFw-]{4,20}$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "用户名成功";
            u = true;
        }else{
            this.nextElementSibling.innerHTML = "用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符";
            u = false;
        }
    }

    // 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
    opass.onblur = function(){
        // 提前定义每种类型的状态：0为没有，1为出现
        var a=b=c=0;
        // 是否出现数字a
        var aReg = /d/;
        if(aReg.test(this.value)){
            a = 1;
        }
        // 是否出现字母b
        var bReg = /[a-zA-Z]/;
        if(bReg.test(this.value)){
            b = 1;
        }
        // 是否出现特殊c
        var cReg = /[W]/;
        if(cReg.test(this.value)){
            c = 1;
        }
        // 状态累加之后，判断总和，判断难度类型
        switch(a+b+c){
            case 1:
                this.nextElementSibling.innerHTML = "简单";break;
            case 2:
                this.nextElementSibling.innerHTML = "一般";break;
            case 3:
                this.nextElementSibling.innerHTML = "困难";break;
        }
        p = true;

        
        // 在第一次输入密码时，只要重复密码不为空，都做重复密码的验证
        if(opass2.value == "") return;
        if(this.value === opass2.value){
            opass2.nextElementSibling.innerHTML = "一致";
            p2 = true;
        }else{
            opass2.nextElementSibling.innerHTML = "不一致";
            p2 = false;
        }
    }

    opass2.onblur = function(){
        if(this.value === opass.value){
            this.nextElementSibling.innerHTML = "一致";
            p2 = true;
        }else{
            this.nextElementSibling.innerHTML = "不一致";
            p2 = false;
        }
    }

    obtn.onclick = function(){
        // 提交时，判断所有输入框的状态必须全为true
        if(u && p && p2){
            alert("ok")
        }else{
            // 只要有一个不为true，都单独判断，找到真正的错误
            if(!u){
                alert("用户名error")
            }
            if(!p){
                alert("密码error")
            }
            if(!p2){
                alert("重复密码error")
            }
        }
    }

之前没有正则的时候做表单验证很麻烦，用正则几行代码就可以判断是否满足，是不是很好用呢。正则随便怎么写都行，但要知道写的是设么规则，根据这个规则能写出正确的字符哦。很多人会觉得正则很难，看上去跟乱码一样，但如果一点点的拆分开来，没有那么难。可以多看看，多写写，感受下到底是什么样的。就像别人一说一都理解，但一敲代码就出错，都是一样的。多练多看！