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文档吧，我感觉这些就够我使用了。。。。