表單驗證神器-validate

最近做表單校驗提交的功能特別多，之前都是自己寫js,再點擊提交的時候，滿足驗證必填，格式，報錯以后的提示，跳轉到報錯處等等需求，最近同事給推薦了一個插件 用來驗證表單，十分好用，在以上功能滿足的前提下，還可以對表單進行觸發校驗，失去焦點校驗，也可以自動跳轉錯誤等。

插件名:jquery.validate.js

是一個基於jquery的表單驗證工具

官網地址：http://jqueryvalidation.org/     一定要參照官網地址 看，很多東西 其他平台都沒有講清楚，使用的時候繞了很大的彎子

引入相應資源以后

 基礎使用： （基礎使用可以參考菜鳥教程）

 

var ruleObjNew= $("#form").validate(ruleObj)

ruleObj是一個包含驗證規則，忽略驗證的內容，報錯形式，報錯內容，提交方法等等定義的一個對象 
ruleObjNew 是validate生成的實例，也可以說是 唯一標識，需要通過這個 對校驗規則進行銷毀

ruleObj

   var ruleObj={
            //忽略某些元素不驗證  忽略類名no-require的不驗證
            ignore:".no-require",
            //驗證規則
            rules: {
               /* input textarea radio checbox等name名：{
                                        該表單元素驗證規則
                                        required：true,自帶規則 參照官網 或者 菜鳥教程
                                        email:true,
                                        english:true 自寫規則名
                                }
                */
                mailbox:{
                    required:true,
                    email: true
                },
                //只有一個規則的寫法
                birth: "required",
                firstPinYin: {required:false,english:true},
                lastPinYin:  {required:false,english:true},
                contentsContent:  {required:false},
                firstname: {
                    required:true,
                    noNum:true
                },
                middleName: {
                    required:true,
                    noNum:true
                },
                lastName: {
                    required:true,
                    noNum:true
                },
                fullName:{
                    required:true,
                    noNum:true
                },
                nationality: "required",
                phone: "required",
                passportNumber: "required",
                InterestIndustry:'required',
                typeOfID: "required",
                titleen: "required",
                endActivity: "required",
                newKinetic: "required",
                otherIndustry:{
                    required:false
                },
                //單選復選框 一定要寫上name或者 在元素上加required屬性 二選一 表示必填 ，必填的radio checbox的messages需要在messages單獨寫一次
                investmentInSd:{
                    required:false
                },
            },
            messages: {
                //radio checbox的messages需要單獨寫
                gender:{
                    required: "該項為必填項"
                },
                newKinetic: {
                    required: "該項為必填項"
                },
                isInvestmentInSd: {
                    required: "該項為必填項"
                },
                InterestDates: {
                    required: "該項為必填項"
                },
                InterestIndustry: {
                    required: "該項為必填項"
                },
                interestCity: {
                    required: "該項為必填項"
                },
            },
            //驗證不通過表現形式
            errorPlacement: function(error, element) {
                //默認情況是：error.appendTo(element.parent());即把錯誤信息放在驗證的元素后面。
                element.parents('.form-item').addClass('on')
                error.appendTo(element.parents('.item'));
            },
            submitHandler: function (form) {
                //這里是 改寫了  $("#form").submit() 表單的submit方法 ，表單submit的時候 是 執行submit(form)這個函數
                submit(form);
            }
        }

改寫的表單submit方法

 function submit() {
            $.ajax({
                type: "POST",
                url: "",
                beforeSend: function () {

                },
                data: $('#form').serialize(),
                async: true,
                success: function (data) {
                    if (data == 0) {
                        layer.confirm('提交成功', {
                            btn: ['確定'] //按鈕
                        }, function () {
                            location.href = "/list";
                        });
                    } else {
                        layer.alert("提交失敗！");
                    }
                },
                complete: function () {
                },
                error: function () {
                    console.log("提交失敗！");
                }
            });
        }

 

調用

  //    提交
    $('.submit').click(function () {
        // 當有多種校驗規則的情況下 需要先銷毀
        ruleObjNew.destroy()
        // 應用校驗規則 生成校驗實例
        ruleObjNew=$("#form").validate(ruleObj);
        //並調用表單提交
        $("#form").submit()
    })

 

自定義規則添加：

 

 jQuery.validator.addMethod("english", function(value, element) {
            return this.optional(element) || (/^[a-zA-Z]+$/g.test(value.trim()));
        }, "該項只能輸入字母");

　　

 

一般情況下，表單會有一些聯動效果，造成校驗規則改變，所以對應初始化的表單規則就不能使用了 需要進行修改 ，這里 提供了添加和移除的規則的方法

 

      form.on('select(nationality)', function(data){
            if(data.value=='中國'){
                isChina=true;
                //中國 國籍下 拼音顯示 並必填
                $('.PinYin').show()
                $("#firstPinYin").rules("add",'required');
                $("#lastPinYin").rules("add",'required');
                //填寫關於姓名的都添加 不能有空格，必須中文的校驗
                
               

                $("#firstname").rules("add",'noKong');
                $("#lastName").rules("add",'noKong');

             

                $("#firstname").rules("add",'chinese');
                $("#lastName").rules("add",'chinese');
               
            }else{
                isChina=false;
                //當為非中國的情況下，拼音hide，並移除必填校驗，並證件號碼移除身份證校驗規則
                $('.PinYin').hide()
                $("#firstPinYin").rules("remove",'required');
                $("#lastPinYin").rules("remove",'required');
                
                $("#passportNumber").rules("remove",'idCard');
                //填寫關於姓名的都添加移除 不能有空格，必須中文的校驗，添加必須英文，並轉大寫的校驗規則
            

                $("#firstname").rules("remove",'noKong');
                $("#firstname").rules("add",'english');
                
                $("#lastName").rules("add",'english');
                $("#lastName").rules("remove",'noKong');
                
            }
            idTypeFn()
        });

　　

這里有一個注意，表單聯動，或者自定義規則添加 可能在校驗實例生成之前，所以直接這樣寫會報錯，無法找到，

所以要實例生成要在聯動修改，自定義規則添加之前 ，建議一開始就生成一個規則 之后 需要改動的時候也可以銷毀 ，使用新的規則 

var ruleObjNew= $("#form").validate(ruleObj)

例子：

某個信息填寫頁面中，有暫存和提交兩個按鈕，暫存的校驗規則是 填寫后校驗，不填寫不校驗，不進行非空校驗，提交的規則是 必填校驗，規則校驗

兩套校驗規則存在很大的沖突，頻繁 修改同一個校驗規則，工作量比較大，所以一開始就寫兩套規則，當使用領一個規則的時候 對當前規則進行銷毀，在執行提交方法即可

 

這里涉及一個點：填寫即校驗，不填寫不校驗的規則 這個不需要我們判斷是否非空來進行動態修改校驗規則，validate提交了方式

填寫即校驗，不填寫不校驗

  mailbox:{
                    email: {
                        depends:function () {
                            //當下列情況滿足的情況下校驗
                            return ($('input[name=mailbox]').val().length > 0);
                        }
                    }
                }

 <input type="text" name="mailbox" >

 

中英文切換

很多時候，都需要兩個版本，中英文切換 包括 校驗提示

1.jquery.validate.min.js 版本里面有校驗規則，可以直接修改

2.下載的完整包里有 messages_zh.js，messages_en.js 在jquery-1.10.2.min.js之后直接引用，即可生效

3.在messages: {}一個一個重新定義 ，不建議

暫時想到這么多，以后接着補充

2020-04-15

只進行校驗，不提交表單的操作

 $("#form").validate(ruleObj);
        if ($("#form").valid()) {
            console.log("校驗通過")
        } else {
            console.log("校驗不通過")
        }