无为清净楼资源网

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

在上篇文章给大家介绍了jQuery Validate初步体验(一) ，本文继续给大家分享jquery validate相关知识，对本文感兴趣的朋友快来学习吧。

刚刚试了所谓的新版的用法。千万别问我是多新，因为我也不知道。。。

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


 个人感觉这种用法比通过javascript自定义验证规则，要方便和简单多了。昨天在刚开始自定义的时候，总是无法正确的提示，当时完全不知道为什么。直到检查了多遍才发现，原来是因为我的rules里的键值对之间漏了一个逗号。所以，如果默认的校验规则已经满足你的验证需求，而你只是想改变一下提示语。那我个人建议你用这种新版的用法，当然也可以用 系列(一) 里的方法




二。具体看情况自己选择。




还有我上面的提示都是默认的黑色，身为提示，那样也太没存在感了。




为了增加存在感，你只需要在<head></head>之间插入下面的代码就可以了。







<style>
 #registerForm label.error{
  margin-left: 10px;
  color:red;
 }
</style> 





请注意上面的#号后面跟着是表单的ID，你需要改成你自己相应的表单ID。我昨天尝试的时候，找到的资料里写的是#frm。当时我还以为#frm又是我没接触过的新用法呢，我还一直疑惑，为什么我的提示不显示成红色。基础差哎。。。




如果默认的验证规则已经不能满足你的需求，那么接下来，你就得自定义验证规则了。




比如，这里有一个需求，要你检查用户输入的邮编是否合法，这时你就得自定义验证规则了，使用的方法是jQuery.validator.addMethod()。







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


当然，你也可以把这个验证规则提取出来存到一个JS文件里，然后在要用的地方引入JS文件。







jQuery.validator.addMethod("isZipCode", function(value, element) {
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码"); 
<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/jquery.js">


 接下来，就要好好说说jQuery.validator.addMethod() 这个方法，这个方法一共有三个参数。




第一个参数 ：“isZipCode” 是定义方法名，必须保证方法名唯一。




第二个参数：是一个回调（callback）函数。




　　这个回调函数有三个参数：




　　　　第一个：value ，是当前被验证的元素的值。




　　　　第二个：element，是当前被验证的元素。




　　　　第三个：param，是传入的参数，例如： minlength : 6  里的参数为6;  rangelength：[2,10]  里的参数为2和10。当你没有传入参数，这个可以省略不写。




　　　　在这个回调函数里有一个this.optional(element)函数要特别注意。当表单的输入值为空时，即element的值为空，this.optional(element)的返回值为true，类似于判空操作，也就是说该表单输入项不是必填项，当不填时通过了验证。如果element的值不为空，this.optional(element)的返回值就是false，这时就要根据  ||  后面的验证来判断最终的返回为true 或false。所以当某个输入项不是必填项但如果填写了又需要按照一定的规则来验证的时候，一定要记得带上this.optional(element)。




第三个参数：验证的提示信息。




　　这个参数可以直接是一句提示信息，例如，"这是必填字段"；也可以通过创建函数jQuery.validator.format(value)来显示，例如，$.validator.format("请输入长度在 {0} 到 {1} 之间的字符串")，其中 {0} {1} 代表该方法的参数，也就是回调（callback）函数里的第三个参数param。




官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等，但我粗略的看了一下，发现大部分只是仅供参考，实用性不强，不能直接使用。




我整理了几个网上找到的验证规则，当然也仅供参考。验证规则的核心就是正则表达式，这个得学。







// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
// 手机号码验证 
jQuery.validator.addMethod("mobile", function(value, element) { 
var length = value.length;
var mobile = /^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/;
return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "手机号码格式错误"); 
// QQ号码验证 
jQuery.validator.addMethod("qq", function(value, element) { 
var tel = /^[1-9]\d{4,10}$/; 
return this.optional(element) || (tel.test(value)); 
}, "qq号码格式错误"); 
// IP地址验证 
jQuery.validator.addMethod("ip", function(value, element) { 
var ip = /^("Ip地址格式错误"); 
// 字母和数字的验证 
jQuery.validator.addMethod("chrnum", function(value, element) { 
var chrnum = /^([a-zA-Z0-9]+)$/; 
return this.optional(element) || (chrnum.test(value)); 
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)"); 
// 中文的验证 
jQuery.validator.addMethod("chinese", function(value, element) { 
var chinese = /^[\u4e00-\u9fa5]+$/; 
return this.optional(element) || (chinese.test(value)); 
}, "只能输入中文"); 





如果有什么地方写错了或者写的不够好，希望大大们能提出来。还有，欢迎留言评论，一起学习。


                                

                                

                                     

                                

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