表单验证的做法

Posted 2020-08-15 me春天

function checkForm(from){
    var from_text = $(from).find(‘input[type=text],input[type=password]‘),
    isok = true,
    Prompt = [
        {
            Type : "user",
            reg : /^[\u4e00-\u9fa5]{1,10}[·.]{0,1}[\u4e00-\u9fa5]{1,10}$/,
            msg : "请填写用户名",
            tipe : "用户名不能为空"
        },{
            Type :"psw",
            reg :/^[a-zA-Z0-9_]\w{5,17}$/,
            msg : "密码长度为6-18位字符数字",
            tipe : "密码不能为空"
        },{
            Type : "name",
            reg : /^[\u4e00-\u9fa5]{1,10}[·.]{0,1}[\u4e00-\u9fa5]{1,10}$/,
            msg : "请填写正确联系人",
            tipe : "联系人不能为空"
        },{
            Type :"phone",
            reg : /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
            msg : "请填写正确电话号码",
            tipe : "电话号码不能为空"
        }
    ];
    from_text.each(function(i){
        var val = $(this).val(),
        name = $(this).attr("name"),
        tip = $(this).attr("myAttr"),
        num = Prompt.length;
        if(tip){
            if (val == "") {
                alert(tip+"不能为空"); 
                isok = false;
                return false
            };
            for (var j = 0; j < num; j++) {
                if (name == Prompt[j].Type) {
                    if(!Prompt[j].reg.test(val)){
                        alert(Prompt[j].msg);
                        isok = false;
                        return false;
                    };
                };
            }; 
        }  
    })
    return isok;
}

这是之前自己写的表单验证，缺点还是挺多需要依赖name属性来做验证查找（有对应name属性的进行验证没有的不验证），空的提示内容写在input的myttr属性里，每个表单的特别提示写在Prompt里面，依靠循环找到对应name进行验证 

如果我在Prompt里面写很多的验证种类那么不就要循环好多次了（效率太低了咯！！！汗！！！），而且最不好的一点如果一个页面里有2个手机验证而且要提交不一样的name呢那怎么搞那同样的验证不一样name要写2个（这不科学啊！！！）

哎呦！最近进了新公司发现同事们写的封装性什么的都比我强太多了贴出来对比一;

(function (win, lib) {
    var patientInfo = {
        youngYear: 14,
        realNameReg: /^([a-z]|[A-Z]|[\u2E80-\u9FFF]){1,8}/,
        cardNumReg: /^([a-z]|[A-Z]|\d){1,18}/,
        idCardReg: /^\d{17}([a-z]|[A-Z]|\d){1}/,
        phoneReg: /^\d{11}$/,
        verify: function (el, verifyReg, verifyAlert, ignoreNull) {
            var verifyText = el.val().replace(/\t+/g, "").replace(/\n+/g, "").replace(/\r+/g, "").replace(/\s+/g, "");
            if (verifyText == "") {
                if (ignoreNull) {
                    return false;
                }
                lib.hkDialog({
                    type: 3,
                    sureCallBack: function () {
                    },
                    content: verifyAlert + ‘不能为空‘,
                    sureTxt: ‘我知道了‘
                });
                return true;
            }
            if (!verifyReg.test(verifyText)) {
                lib.hkDialog({
                    type: 3,
                    sureCallBack: function () {
                    },
                    content: ‘请输入正确的‘ + verifyAlert,
                    sureTxt: ‘我知道了‘
                });
                return true;
            }
            return false;
        }
    }，

//这是完美分割线----------------------------------------------------------------------------------------------
//下面是调用

submitFun: function() {　　var that = this;

　　$(‘.p-save‘).on(‘tap‘, function(e) {
　　　　var PActive = $(‘.p-active‘);
　　　　//名字
　　　　var name = PActive.find(‘.p-name‘);
　　　　if(that.verify(name, that.realNameReg, ‘真实姓名‘)) {return}
　　　　//验证完事true就是不通过
　　　　//下面还有点什么不重要的东西就不管了
　　}

document.addEventListener(‘DOMContentLoaded‘, function (e) {
        patientInfo.init();
    }, false);

})(window, window[‘lib‘] || (window[‘lib‘] = {}));

先说明下咯这个代码并不全（有一些其他的依赖组件），lib代表的是我们封装起来的其他公用调用的方法库（或者说组件调用的），像lib.hkDialog就是指的调用了一个类似弹窗提示的组件（简单说就是alert咯）哇！这样的封装很好啊！！！我又get到新技能了呢！下面还是讲讲这个组件的实现吧！

最上边那些正则其实和我写的那个是一个道理就是把要用来验证的方法,有3个参数一个是要验证的value,一个是上吧的验证正则，一个是提示语，还有一个是可否为空的选项

然后是去空格什么的，先判断ignoreNull如果是true就是可以空咯（然而我刚看到这里的时候我就想如果我想要不能为空又不要验证怎么办哦！！！我真是猪了！这样的情况直接去头尾空格然后判断是否为空不就完了！汗颜！！！）

验证完事true就是不通过（why？我都习惯返回是fales是不通过的，反了反了！可以少写一个！，我之前用这个找了好久问题后来看里面代码才发现的）

这个verify验证里面写得东西好少啊！但是这样用起来更加灵活了呢，

还比我的少了循环效率更好，

验证内容和正则传进去，提示语传进去基本上就可以了！用起来更方便灵活，以后就用这个吧！（不过我还是想把他返回的true和false反过来！嘿嘿！）