JQuery validate 验证失败回调自定义方法及错误显示

本篇文章主要介绍 JQuery validate 验证失败后回调自定义方法，并显示自定义样式。

JQuery validate需求

假设我想在使用 validate 基础上实现一个这么样的功能：校验失败后，修改特定的样式，比如：我想校验错误之后，将下面的输入框input-group 完全变红，并不是简单的插入提示，或者只是给input一个css类，而是出现错误之后，操作DOM；并且在我修正后输入框内容后，也就是验证成功之后，再恢复原先样式。

此处就用到两个知识点：校验失败之后，回调自定义方法（showerros）——显示特定错误提示；校验成功后回调方法（successs）——显示验证成功样式。

validate 提示错误

回调自定义方法及自定义错误显示

要想实现在框架的基础上实现，验证失败回调指定方法，我们需要复写（Override） showErrors 。

showErrors （errorMap, errorList）
方法名：showErrors

参数： errorMap, errorList

描述：处理错误的方法。在验证错误后，会调用该方法，通过这个方法显示错误信息。
errorMap ：json数据，key ： input’s id, value : message(定义的错误信息提示)
errorList ：校验错误的元素列表

注意：

在使用的时候，除了编写自定义的错误处理方法外，建议在方法里 调用一下插件默认方法，这样才能保证：插件的正常提示，隐藏提示，监听输入框等功能。 也就是：this.defaultShowErrors();

下面是处理实例：

// 提示图标
var errorIcon = '<i aria-hidden="true" class="fa fa-exclamation-triangle"></i>';

// 定义校验器，将表单validate 插件
var validator = $('#daily_form').validate({

    // 错误插入位置，以及插入的内容
    errorPlacement: function(error,element) {
        $(element).parent().after(error);
    },

    // 表单对应字段的错误提示信息
    messages: {
        dailyAdd_title: {
            required: errorIcon + "请填写日报标题",
        },
        dailyAdd_img: {
            required: errorIcon + "请选择日报图片",
        },
        dailyAdd_askId:{
            required: errorIcon + "请填写问题Id",    
        }
    },

    //使用div标签，包裹提示信息，而后插入DOM
    wrapper:"div",

    //单条校验失败，后会调用此方法，在此方法中，编写错误消息如何显示 及  校验失败回调方法
    showErrors : function(errorMap, errorList) {
        // 遍历错误列表
        for(var obj in errorMap) {
            // 自定义错误提示效果
            $('#' + obj).parent().addClass('has-error');
        }
        // 此处注意，一定要调用默认方法，这样保证提示消息的默认效果
        this.defaultShowErrors();
    },

    // 验证成功后调用的方法
    success:function(label) {
        $(label).parent().prev().removeClass('has-error');
    }

    //点击提交按钮，校验失败后，会调用此方法
    /*invalidHandler: function(form, validator) {
        console.log("");
    },*/
});

“错误处理”其他处理方法

下面这些方法，是baidu,google 提供的处理方法，不建议这样处理，费时，费力。

做法① ： 修改插件源代码

插件的源代码中，处理错误的方法，放在check里，所以这种做法的逻辑就是：在check中添加逻辑，在验证失败的时候，调用回调方法。而后我们再自定义一个 callback，这样就能够回调到我们自己自定义的方法。

缺点：
我们使用框架，尽量使用插件的原生API，原生提供下，我们尽量使用原生。

逻辑代码：

//  在check中修改此处代码
if (!c) {
   //return this.formatAndAdd(b, e), !1
   this.formatAndAdd(b, e);
   var errorCallback=this.settings.fail;
   if($.type(errorCallback)==='function'){
      errorCallback(b,e);
   }
   return false;
}

//而后自定义 errorCallbcak方法。
//详情可参考： http://blog.csdn.net/huang100qi/article/details/52619227

做法② ：给输入框绑定事件 keyup（插件中，绑定的便是keyup事件）

 //自定义校验失败之后回调
$('#daily_form input').keyup(function(){
    if(! $(this).valid()) {
        // 自定义错误处理样式，并显示错误消息
        $(this).parent().addClass('has-error');
    } else {
        // 验证成功后删除
        $(this).parent().removeClass('has-error');
    }
})

最后附上效果图：

validate 前端验证效果图

By Author 　：

我们后台开发使用的是bdp框架，开始觉得可以自己验证，觉得好神奇，遍研究了一下。直到遇到这个问题——自定义错误处理方法，解决不了，而后各种百度，google，没有找到解决方案，辗转反侧，在一个API 介绍中，找到了该方法。故，予以记之。

看到其他方案的时候，我就一直在想，优秀的插件怎么会没有常用的API ！深感怀疑，没有放弃找解决，最后，终于被我找到了。

2017-05-09 来自患有强迫症的精神病人

参考博文

JQuery validate 详细说明：http://www.111cn.net/wy/jquery/59984.htm

其他解决方法：
菜鸟教程：http://www.runoob.com/jquery/jquery-plugin-validate.html
绑定事件实例： https://segmentfault.com/q/1010000004844517
插件修改： http://blog.csdn.net/huang100qi/article/details/52619227
提交后统一处理：　http://stackoverflow.com/questions/6224670/jquery-validation-callback-function/6232588#6232588