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">

<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>

//提交时校验表单信息
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文档吧，我感觉这些就够我使用了。。。。

jquery-validator 的使用方法

推荐阅读