首页 技术 正文
技术 2022年11月8日
0 收藏 747 点赞 2,044 浏览 4482 个字

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元素是如何创建的。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,493
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295