无为清净楼资源网

jQuery Validate初步体验(一)
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的。

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单。

但是在学习的过程中，我也遇到了疑惑，网上的很多例子貌似都是依赖jquery.metadata.js这个库，然后在标签里写成class=”required remote” 这样的形式，class本身是呈现样式的，现在被附上各种校验的规则，看上去有些乱。那如果不依赖jquery.metadata.js，又该怎么写。

1、只引入jquery.js(具体版本自己选择)和jquery.validate.js

<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/jquery.js">


事实证明，只引入上面的两个JS文件也能完成简单的表单验证。




2、不过由于默认的提示信息是英文的，为了能有一个友好的提示，所以，接下来要做的就是让提示信息显示成中文了。




方法一、通过javascript自定义提示信息。







<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/jquery.js">


首先这里有一个方法调用： $("#registerForm").validate([options]) ，这是用来验证选择的表单，方法的参数是可选项，可以输入0个或者多个键值对(key/value)，这个方法是为了处理例如：submit , focus ,  keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使用 rules 和 messages 定义验证的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle去控制非法元素的错误信息显示。其中rules里也可以输入0个或者多个键值对，他的key对应的是元素的name属性值，例如username，confirmpassword等等。而他的value里则是一些验证规则。messages同rules一样可以输入0个或者多个键值对，他的key也是对应的元素的name属性值，而他的value里则是验证错误的提示信息。简而言之，rules{}中定义验证规则的方法。 messages{}中定义错误输出。




上面有一点需要注意的就是  equalTo:"#cpassword"，这个键值对里的value是元素的ID值(如果注意到#号就应该能察觉到)。




通过上面的写法，你就可以自定义提示信息了。或许你会有疑问了，难道我每次验证表单的时候都要重新自定义提示信息吗？当然不是了，你还可以Ctrl C+Ctrl V。这当然是玩笑话。。。不过，接下来的方法二会解决你的疑问。




方法二、自定义一份提示信息，然后保存成JS文件。把他作为模板，然后在需要的页面直接引入就行。我是从网上下载了一份。







(function( factory ) {
 if ( typeof define === "function" && define.amd ) {
 define( ["jquery", "../jquery.validate"], factory );
 } else {
 factory( jQuery );
 }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
 required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateISO: "请输入有效的日期 (YYYY-MM-DD)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalTo: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")
});
})); 





页面的代码和JV1.HTML几乎是一模一样，只是多引入了一份JS文件。







<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/jquery.js">


方法一和方法二并不互斥，两种方法是可以结合使用的。你可以先用方法二保存一份比较通用的模板，然后再用方法一去按具体情况来自定义提示。




以上就是我今天下午学习的收获了。据说在新版本中，又有了新的写法，既不需要依赖上面提到的jquery.metadata.js库，也不需要通过javascript自定义提示信息，而是在标签里以 data-rule-验证规则、data-msg-提示信息 这样的格式来重新定义。跃跃欲试......




下面是官网提供的默认校验规则。




(1)required:true 必输字段

(2)remote:"check.php" 使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期

(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

(7)number:true 必须输入合法的数字(负数，小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:"#field" 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15)range:[5,10] 输入值必须介于 5 和 10 之间

(16)max:5 输入值不能大于5

(17)min:10 输入值不能小于10


好了，摸索了近两个小时，我的第一篇随笔到这也算是完成了。同时希望能给大家带来灵感。




下篇文章给大家介绍jQuery Validate初步体验(二)，一起学习吧。


                                

                                

                                     

                                

                                    标签：
                                        
jquery_validate

                                     

                                
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接