ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后

ASP.NET MVC借助jQuery的验证机制，提供了一套从客户端到服务端异步验证的解决方案，通常情况下，用起来相当方便。但面对一些相对特殊的情况，可能会遇到验证失效的场景，比如在使用ajax动态异步加载视图的时候。所以，有必要了解其背后运行的原理。首先从了解jQuery验证开始。本篇主要包括：

● jQuery验证的各种方式
● 错误信息是如何显示的
● 调用validate方法的背后发生了什么？

jQuery验证的各种方式

□ 通过class属性值实施验证规则

使用jQuery对表单元素进行验证，一种做法是通过为表单元素添加class属性值实现的。

如果想对jQuery验证汉化，可通过NuGet安装jQuery.Validation.Localization：
Install-Package jQuery.Validation.Localization

<form>

    <input id="Name" name="Name" type="text" class="required"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $('form').validate();

        });

    </script>

}

□ 通过$.validator.addClassRules方法自定义验证规则

通过 $.validator.addClassRules方法还可以自定义验证规则，然后把新的规则名作为表单元素class属性的值。

<form>

    <input id="Name" name="Name" type="text" class="name" /><br/>

    <input id="z" name="z" class="zip" type="text"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $.validator.addClassRules({

                name: {

                    required: true,

                    minlength: 2

                },

                zip: {

                    required: true,

                    digits: true,

                    minlength: 5,

                    maxlength: 5

                }

            });


            $('form').validate();

        });

    </script>

}

□ 通过$.validator.addMethod自定义验证规则

<form>

    <input id="e" type="text" name="firstName"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function () {


            $.validator.addMethod("notnumbers", function(value, element) {

                return !/[0-9]*/.test(value);

            }, "不能输入数字");


            $('form').validate({

                rules: {

                    firstName: {

                        notnumbers: true

                    }

                }

            });


        });

    </script>

}

□ 通过validate方法的json参数

通过validate方法的json参数，也可为表单元素设置验证规则。

<form>

    <input id="e" type="text" name="userEmail"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $('form').validate({

                rules: {

                    userEmail: {

                        email: true,

                        required: true

                    }

                }

            });

        });

    </script>

}

□ 动态添加或删除验证规则

通过rules方法可以为表单元素动态添加验证规则。

<form>

    <input id="e" type="text" name="userEmail"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $('form').validate({

                rules: {

                    userEmail: {

                        required: true

                    }

                }

            });


            //为表单元素动态添加验证规则

            $('#e').rules('add', {

                minlength: 2,

                maxlength:5

            });

        });

    </script>

}

通过rules方法可以为表单元素动态移除验证规则。

<form>

    <input id="e" type="text" name="userEmail"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $('form').validate({

                rules: {

                    userEmail: {

                        required: true

                    }

                }

            });


            //为表单元素动态添加验证规则

            $('#e').rules('add', {

                minlength: 2,

                maxlength:5

            });


            //为表单元素动态移除验证规则

            $('#e').rules('remove', 'minlength');

        });

    </script>

}

错误信息是如何显示的

□ 通过messages对象

<form>

    <input id="e" type="text" name="userEmail"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $('form').validate({

                rules: {

                    userEmail: {

                        required: true,

                        email: true

                    }

                },

                messages: {

                    userEmail: {

                        required: "*",

                        email: "哈哈，输入正确的email"

                    }

                }

            });


        });

    </script>

}

□ 通过$.validator.addMethod重写错误提示

通过$.validator.addMethod方法还可以为默认验证规则重写错误提示信息。

<form>

    <input id="Name" name="Name" type="text" class="name" /><br/>

    <input id="z" name="z" class="zip" type="text"/>

    <hr/>

    <input type="submit" value="提交"/>

</form>


@section scripts

{

    <script src="~/Scripts/jquery.validate.js"></script>

    <script src="~/Scripts/localization/messages_zh.js"></script>

    <script type="text/javascript">

        $(function() {

            $.validator.addClassRules({

                name: {

                    newrequired: true,

                    minlength: 2

                },

                zip: {

                    required: true,

                    digits: true,

                    minlength: 5,

                    maxlength: 5

                }

            });


            $.validator.addMethod("newrequired", $.validator.methods.required, "我说这个字段必填");


            $('form').validate();

        });

    </script>

}

□ 通过title属性值重写错误提示

通过表单元素的title属性值是重写错误提示最直接的做法。
<input id="z" name="z" class="zip" type="text" title="我是通过title设置的错误提示"/>

调用validate方法的背后发生了什么？

→通过表单事件触发验证

这些表单事件包括focusin, focusout, keyup, submit, click，这些事件是可以禁止的。

$(".selector").validate({

  onfocusout: false,

     onkeyup: false,

     onclick: false,

    onsubmit: false

});

→获取validate对象,该对象包含了所有了验证规则和设置

可以通过如下方式获取validate对象。

var validator = $('.selector').data("validator");

→对各个表单元素进行验证

下一篇将试着去了解ASP.NET MVC异步验证的表单html元素是如何创建的。