JQuery Validate插件实现有多条错误提示时，只显示第一条错误提示

使用JQuery的Validate插件进行表单验证时，默认提示所有的验证不通过的错误信息，但在实际开发中，大多场景只需要提示第一条错误信息，此时可以参考如下代码实现：

$('#login-form form').validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,    
            minlength: 8,
            maxlength: 16
        }
    },
    messages: {
        email: {
            required: '请输入邮箱地址！',
            email: '请正确填写邮箱地址！'
        },
        password: {
            required: '请输入您的密码！',
            minlength: '密码长度不能小于8个字符！',
            maxlength: '密码长度不能大于16个字符！'
        }
    },
    submitHandler: function(form){
        // 表单处理逻辑...略
    },
    invalidHandler: function(form, validator){
        $.each(validator.invalid, function(key, value){
            alert(value);
            return false;
        })
    },
    errorPlacement: function(error, element){
        //error.appendTo("");
    }
});

invalidHandler选项的作用是处理表单中未通过验证的表单元素，此处为其指定一个处理函数，用于遍历未通过验证的表单元素，在输出完第一个错误时，马上结束循环，实现只处理第一个错误的功能。

errorPlacement选项的作用是指定未通过验证的表单元素的位置，要想实现只处理第一个错误的功能，此选项必须添加上，用以覆盖默认的显示逻辑。

实现上述两个选项，当表单验证出现多处错误时，就可以实现只处理第一个错误的功能了，当然你可以根据自己的需求定制自己的显示效果！