jquery-validator 的使用方法

Posted 2020-11-25 liangziaha

简单记录一下  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>

//提交时校验表单信息

$("#basicInfoForm").validate({

 　　　　rules: {  //定义规则

           effectiveDate4: {  //表单提交的 name 属性为 effectiveDate4的dom元素

              required: true,   //必填 不能为空  自带的校验方法

              holderDateValidity: true  //自定义规则

        },

　　　　 messages: {

　　　　　　effectiveDate4: {

              required: "投保险人证件有效日期不能为空",   //required为空的时候 提示语

              holderDateValidity: "投保险人证件有效日期不能为空"  //自定义规则的提示语

          },

　　　　 }

}）

更多的使用方法，大家去查api文档吧，我感觉这些就够我使用了。。。。