jquery-validator 的使用方法

簡單記錄一下  jquery-validator 的使用方法

首先我們要引入jquery和jquery-validator

給張圖看一下 校驗的提示方法

 

 

引入之后開始使用

// 自定義校驗方法 返回 true 和 false
    $.validator.addMethod(
        "holderDateValidity", //自定義的 校驗方法名稱
        function (value, element) { //value 使用當前校驗方法的 dom元素的value 值，element 使用當前校驗方法的 dom元素
            var effectiveDate4 = $('#effectiveDate4').val();
            var effectiveDate5 = $('#effectiveDate5').val();
            if (effectiveDate4 == '' && effectiveDate5 == ''){  //自己定義校驗信息
                return false;
            }else{
                return true;
            }
        }
    );

然后進行使用

<form id="basicInfoForm">

　　　　<div class="input-item">

          <label class="input-name">證件有效日期<span class="must">*</span></label>

          <input id="effectiveDate4" name="effectiveDate4" class="Wdate pa_ui_element_normal input-text" autocomplete="off"

           style="width: 216px;">

          <input id="effectiveDate5" name="effectiveDate5" class="Wdate pa_ui_element_normal input-text" autocomplete="off"

           style="width: 216px;">

      </div>

</form>

<button onclick="sub()">確定</button>

//提交時校驗表單信息
function sub(){
　　$("#basicInfoForm").valid()  //提交表單時增加驗證方法：
}

//初始化頁面時加載驗證方法：

 
          
            $(function () { 
           
          
                $("#basicInfoForm").validate({ 
           
          
                    rules: {  //定義規則 
           
          
                        effectiveDate4: {  //表單提交的 name 屬性為 effectiveDate4的dom元素 
           
          
                            required: true,   //必填 不能為空  自帶的校驗方法 
           
          
                            holderDateValidity: true  //自定義規則 
           
          
                        }, 
           
          
                        messages: { 
           
          
                            effectiveDate4: { 
           
          
                                required: "投保險人證件有效日期不能為空",   //required為空的時候 提示語 
           
          
                                holderDateValidity: "投保險人證件有效日期不能為空"  //自定義規則的提示語 
           
          
                            }, 
           
          
                        }， 
           
           
           　　　　　　　errorElement: "em", // 驗證失敗時在元素后增加em標簽，用來放錯誤提示
 　　　　　　　errorPlacement: function (error, element) { // 驗證失敗調用的函數
 　　　　　　　　error.addClass( "error_tip" ); // 提示信息增加樣式 
            　　　　　　　　　if ( element.prop( "type" ) === "checkbox" ) {
 　　　　　　　　　　　　error.insertAfter(element.parent("label")); // 待驗證的元素如果是checkbox，錯誤提示放到label中
 　　　　　　　　　　} else {
 　　　　　　　　　　　　error.insertAfter(element);
 　　　　　　　　　　}
 　　　　　　　　},
 　　　　　　　　highlight: function (element, errorClass, validClass) {
 　　　　　　　　　　$(element).addClass("has-error"); // 驗證失敗時給元素增加樣式
 　　　　　　　　},
 　　　　　　　　unhighlight: function (element, errorClass, validClass) {
 　　　　　　　　　　$(element).removeClass("has-error"); // 驗證成功時去掉元素的樣式
 　　　　　　　　} 
           
          
                    } 
           
          
                }) 
           
          
            }) 
           
         

 

更多的使用方法，大家去查api文檔吧，我感覺這些就夠我使用了。。。。