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

 2024-01-29 00:01:58  阅读 0

url: "请输入合法的网址",

date: "请输入合法日期",

: "请输入法定日期 (ISO)。",

: "请输入合法号码",

: "只能输入整数",

: “请输入一个有效的信用卡号码”,

: “请再次填写同等数值”,

: "请输入合法后缀的字符串",

: .("请输入长度最多为{0}的字符串"),

: .("请输入长度至少为{0}的字符串"),

: .("请输入长度在{0}到{1}之间的字符串"),

range: .("请输入一个介于 {0} 和 {1} 之间的值"),

max: .("请输入一个最大为 {0} 的值"),

min: .(“请输入最小值 {0}”)

};

.(..,cnmsg);

这样,只需在母版页中引用...js即可替换原来的英文提示。 这两种方法都是可取的。 如果你想改造... 成适合你的验证控件,就用第一种方法,直接改源码。 如果你只是想使用一些基本功能,不想接触原始源码,那么使用第二种方法。

然后我们刷新页面,果然全是中文了。 看看效果:

注意:这里的错误信息的样式可以自己定义。 我修改了原来的样式,添加了错误图标,使其更加美观。 样式定义如下:

至此,使用的基础章节就完成了。 执行客户端验证完成。 您可以下载下面的源码来查看具体代码。 请继续关注中级和高级章节。

PS:1.代码中..js是官方版本,..js是我修改后的版本。 我会讲一下中级和高级章节的修改。

2、只能进行客户端验证,不能替代服务器端验证。 为了系统安全,还是需要服务器端验证。

源码下载:点此下载

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

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

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

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

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

具体的

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

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

用户名

姓名

年龄

邮件

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

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

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

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

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

//定义中文消息

var cnmsg = {

: “必填项目”,

: "请更正此字段",

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

标签: 验证 代码 输入

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


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