在不使用 Microsoft 验证控件的情况下使用 jQuery.Validate 进行客户端验证(主要文章)

 2024-01-29 00:02:48  阅读 0

用户名

姓名

年龄

邮件

在上面的代码中,我已经完成了用户名、姓名、年龄和电子邮件地址的验证。 不知道你是否注意到了。 就是每个里面的class style,表示是必填的,表示必须是数字,email表示是必填的。 它是电子邮件格式。 如果写为email,则表示该字段必须填写,并且必须是email格式。

这个怎么样? 是不是很简单呢? 它消除了拖动控件、指定验证控件和其他繁琐代码的需要。 只需一个[样式名称]即可完成。 当然,它还提供了多种验证方式,例如日期、范围、最大值、最小值、整数等。 、数值比较等验证方法。 同时,还可以自定义验证方式(当然,这种自定义验证方式在初级章节中不会有,请期待中级和高级章节)。

好了,我们点击提交按钮看看效果:

是的,验证成功了,但是有问题。 为什么提示信息都是英文?

我们来检查一下源代码。 果然,第236行有定义提示消息的方法,我们可以修改这里的,将其改为中文,或者自定义一个中文消息...js,然后使用。 覆盖自己的消息,代码如下:

//定义中文消息

var cnmsg = {

: “必填项目”,

: "请更正此字段",

email: "请输入正确的电子邮件格式",

主要原因如下:

1.拖动控件太麻烦。 这是微软控件的常用方法。 如果你想使用一个控件,你必须把它从工具栏拖到页面上(当然,你不必拖拽手写体)。

2、必须明确验证对象。 验证控件与其他控件的区别在于,它验证其他控件的输入是否有效,因此必须指定要验证的对象。

3、影响整个页面的美观。 例如,有些管理系统总是需要大量的用户输入验证,那么一个页面上可能有几十个验证控件,严重影响了原始页面的内容,看起来很不舒服。

4.ajax验证不方便。 如今的系统越来越注重客户的用户体验,因此ajax验证必不可少。 不过微软的验证控件不提供ajax验证(当然你也可以通过微软来做)。 你需要自己做。 去拓展吧

说了这么多,我只是想表达一下我的意思。 微软的验证控件不是很好用,所以这时候我就想有没有一些比较好用的验证控件?

方法有两种:1.自己写一个(考虑到我水平没那么高,想了想还是算了吧)

2.找到一个完成的验证控件(这个比较靠谱,毕竟我做不到,但是别人还是可以做的)

所以根据我的要求: 1.不需要拖动控件

2.不影响页面代码

3.简单的AJAX验证

网上搜了一下,发现有2种: 1.自己写的ASP.NET验证控件。 虽然封装了很多功能,但是还是不能满足我的需求。

2.类型验证函数库。 这个比较靠谱。 毕竟js是可以和页面代码分离的(不影响页面代码)。 只需调用函数库中的验证代码即可验证指定对象(无需拖动控件)。 同时ajax的本质还是依赖于调用(AJAX验证)

于是根据上面的第二条线索,我查找了一个使用——.编写的验证库,这个验证库属于插件,是.de编写的。 .de还提供了很多其他的插件,比如,(我用.来完成的仿淘宝商品搜索功能(改善了键盘上下选择体验)就是基于此编写的)等等(大家可以查看他们的网站了解详情)。

决定使用。 首先下载它的JS插件:

输入并选择下载,里面有很多例子可供我们学习。

接下来我们就开始正式使用了。 我们搭建了一个基本的网站,建立了母版页(这里使用母版页是因为一些特定的项目会有母版页来存放一些常用的东西。这里为了模拟真实的环境,创建了母版页。如果你觉得不需要,直接创建页面即可,不创建),然后引入and。 进入母版页:

Tips:与一般引用不同,我使用的是Page。 获取脚本的路径。 在一些项目开发中,不同模块的代码会在不同的目录下进行操作,而一半的母版页都在网站中。 根目录,所以为了保证所有页面的基础都能被引用,需要重新获取路径(但是这样做的缺点是不能动态的给后台代码添加东西,编译器会报错错误。解决办法是放一个控件进去,后台代码中重新组装字符串并赋值)。

引用完基本所需的脚本后,将脚本添加到母版页中进行验证。

。 是监控形式。 在进行任何提交表单的操作之前,都会检查表单中的输入项是否符合规则,只有符合要求才允许提交。所以有必要

在 ().ready() 验证并注册表单

具体的

这里肯定有人会疑惑,为什么代码里要加“.”呢? 写在页面的中间? 这涉及到验证规则的制定以及分组验证的方法,这些都会在中级和高级章节中进行讲解。

注册完验证监控后,我们就可以开始编写具体的验证代码了。 我们通过母版页创建一个子页面,并在页面上放置几个基本的输入框代码如下:

标签: ajax

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码