表單驗證——jquery validate使用說明

//validate 選項***********************************************************
        $("form").validate({

            debug:true  //進行調試模式（表單不提交）
            rules:{
                name:"required", //自定義規則,key:value的形式,key是要驗證的元素,value可以是字符串或對象
                 email:{
                     //內置驗證方式
                    required:true, //必填項
                    required:"#aa:checked"表達式的值為真,則必填項
                    required:function(){}返回為真,則必填項
                    email:true,   //驗證電子郵箱格式
                    minlength:5,  //設置最小長度
                    maxlength:10, //設置最大長度
                    rangelength:[5,10],//設置一個長度范圍[min,max]
                    min:2,        //設置最小值
                    max:8,       //設置最大值
                    range:[2,8]      //設置值的范圍
                    url:true,         //驗證URL格式
                    date:true,    //驗證日期格式(類似30/30/2008的格式,不驗證日期准確性只驗證格式)
                    dateISO:true, //驗證ISO類型的日期格式 例如：2009-06-23
                    dateDE:true,  //驗證德式的日期格式（29.04.1994 or 1.1.2006）
                    number:true,  //驗證十進制數字（包括小數的）
                    digits:true,  //驗證整數
                    creditcard:true, //驗證信用卡號
                    accept:""     //請輸入擁有合法后綴名的字符串（上傳文件的后綴）
                    equalTo:"id名" //驗證兩個輸入框的內容是否相同
                    phoneUS:true   //驗證美式的電話號碼
                    regex:/正則表達式/     //上面addMethod擴展的驗證規則
                }
            }

            messages:{
                name:"Name不能為空",  //自定義的提示信息key:value的形式key是要驗證的元素,值是字符串或函數
                email:{
                   required:"E-mail不能為空",
                   email:"E-mail地址不正確"  //validate 內置驗證有默認的英語提示 此處為重新自定義
                }
            }

            errorPlacement: function(error,element) {
                element.parents('.form-group').children(".help-block").html(error); //錯誤顯示的位置 element驗證的元素error錯誤提示
            }

            submitHandler:function(form) {//通過驗證后運行的函數,里面要加上表單提交的函數,否則表單不會提交
                $(form).ajaxSubmit();  
                //form.submit();
            }

            success:"類名"   //要驗證的元素通過驗證后的動作,跟一個字符串,會給輸出錯誤的元素追加一個css類
            ignore:".ignore" //對某些元素不進行驗證
            onsubmit:false   //是否提交時驗證 默認:true
            onfocusout:false //是否在獲取焦點時驗證 默認:true 
            onkeyup:false    //是否在敲擊鍵盤時驗證 默認:true
            onclick:false    //是否在鼠標點擊時驗證(一般驗證checkbox,radiobox) 默認:true
            focusInvalid:false //提交表單后,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點 默認:true
            focusCleanup:true  //當未通過驗證的元素獲得焦點時,並移除錯誤提示（避免和 focusInvalid.一起使用）默認:false
            errorClass:"類名"  //指定錯誤提示的css類名,可以自定義錯誤提示的樣式 默認:"error"
            errorElement:"標簽" //使用什么標簽標記錯誤 默認:"label"
            wrapper:"標簽"      //使用什么標簽再把上邊的errorELement包起來
            errorLabelContainer:"容器id"  //把錯誤信息統一放在一個容器里面
            showErrors:function(errorMap,errorList) { //跟一個函數,可以顯示總共有多少個未通過驗證的元素
                $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
                this.defaultShowErrors();
            }
        })


        //validate方法 返回一個Validator對象,它有很多方法, 讓你能使用引發校驗程序或者改變form的內容**************

        $.validator.setDefaults({//設置validator默認
            debug:true,  //把調試模式設置為默認 如果一個頁面中有多個表單一般用這種方式
            errorClass: "txt-impt", //設置默認錯誤提示的css類名
             errorElement: "div"     //設置默認錯誤提示的標簽
        })

        //addMethod(name,method,message)方法：name(自定義rules的key) method(自定義驗證方法) message(報錯輸出的提示)
        jQuery.validator.addMethod("regex",function(value, element, params){  //擴展方法示例:　　　　　　　　　　　
            var exp = new RegExp(params); //params rules的value傳入的正則表達式
            return exp.test(value);       //value  被驗證的input傳入的值
        },"輸入格式有誤");

        //擴展rules規則
        jQuery.validator.addClassRules("name", {
            required: true,
            minlength: 2
        });
        jQuery.validator.addClassRules({
            name: {
                required: true,
                minlength: 2
            },
            zip: {
                required: true,
                digits: true,
            }
        });
        $("#myinput").rules("add", {  
            required: true,  
            minlength: 2,  
            messages: {  
                required: "Required input",  
                minlength: jQuery.format("Please, at least {0} characters are necessary")  
            }  
        }); 
        $("#myinput").rules("remove"); //全部移除驗證規則
        $("#myinput").rules("remove", "min max") //移除 min max

        var form=$('form');
        $(".formBtn").click(function(){ //按鈕type非submit or submit按鈕不在form內
            console.log("Valid: " + form.valid()) //form.valid() 驗證成功返回true
            var validator = $("form").validate(setValidate);
            var formState=validator.form();      //判斷驗證狀態 返回Boolean
                //validator.element("id名") 驗證某個元素 返回Boolean
                //validator.resetForm()  把前面驗證的FORM恢復到驗證前原來的狀態
                /*validator.showErrors({
                    "firstname": "I know that your firstname is Pete, Pete!"
                }); 顯示自定義的錯誤信息 */

            if(formState==false){
                return;
            }else{
                //do someing...
            }    
        })

        //使用ajax方式進行驗證，默認會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用data選項 后台只允許返回false和true
           remote: "check-email.php"  
        remote: {  
            url: "check-email.php",     //后台處理程序  
            type: "post",               //數據發送方式  
            dataType: "json",           //接受數據格式     
            data: {                     //要傳遞的數據  
                username: function() {  
                    return $("#username").val();  
                }  
            }  
        }  


        //meta String方式***************************************************************

        //引入js
        <script type="text/javascript" src="js/jquery.metadata.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>

        //dom上驗證規則寫法
        <input type="text" name="email" class="{validate:{ required:true,email:true }}" />

        //設置為meta String驗證方式
        $("#myform").validate({
           meta:"validate",
           submitHandler:function() { alert("Submitted!") }
        })