jQuery Validate初步体验(二)


Posted in Javascript onDecember 12, 2015

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

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

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
  $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
  <fieldset>
   <p>
    <label for="cusername">用户名</label> 
    <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是{0}到{1}个字符">
   </p>
   <p>
    <label for="cpassword">密码</label> 
    <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="密码必须不少于{0}位">
   </p>
   <p>
    <label for="cconfirmpassword">确认密码</label> 
    <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-required="true" data-rule-equalTo="#cpassword" data-msg-required="请再次输入密码" data-msg-equalTo="两次输入的密码不一致">
   </p>
   <p>
    <label for="cemail">邮箱</label> 
    <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确"/>
   </p>
   <p>
    <input type="submit" value="提交">
   </p>
  </fieldset>
 </form>
</body>
</html>

 个人感觉这种用法比通过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="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
  jQuery.validator.addMethod("isZipCode", function(value, element) {
   var tel = /^[0-9]{6}$/;
   return this.optional(element) || (tel.test(value));
  }, "请正确填写您的邮政编码");
  $("#registerForm").validate({
   rules : {
    zipCode : {
     required : true,//对于required的提示语句没有进行任何的处理,他会使用默认的英文的提示。
     isZipCode : true//isZipCode为自定义的验证规则
    }
   },
   messages : {//当你不写提示语句,他会使用上面方法返回的提示。
    zipCode : {
     isZipCode : '请输入正确的邮编'
    }
   }
  });
 });
</script>
<style>
#registerForm label.error {
 margin-left: 10px;
 color: red;
}
</style>
</head>
<body>
 <form id="registerForm" method="get" action="">
  <fieldset>
   <p>
    <label for="czipCode">中国邮编</label> 
    <input id="czipCode" name="zipCode" />
   </p>
   <p>
    <input type="submit" value="提交">
   </p>
  </fieldset>
 </form>
</body>
</html>

当然,你也可以把这个验证规则提取出来存到一个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="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/validate.expand.js"></script>
<script>
 $().ready(function() {
  $("#registerForm").validate({
   rules : {
    zipCode : {
     required : true,//对于required的提示语句没有进行任何的处理,他会使用默认的英文的提示。
     isZipCode : true//isZipCode为自定义的验证规则
    }
   },
   messages : {//当你不写提示语句,他会使用方法返回的提示。
    zipCode : {
     isZipCode : '请输入正确的邮编'
    }
   }
  });
 });
</script>
<style>
#registerForm label.error {
 margin-left: 10px;
 color: red;
}
</style>
</head>
<body>
 <form id="registerForm" method="get" action="">
  <fieldset>
   <p>
    <label for="czipCode">中国邮编</label> 
    <input id="czipCode" name="zipCode" />
   </p>
   <p>
    <input type="submit" value="提交">
   </p>
  </fieldset>
 </form>
</body>
</html>

 接下来,就要好好说说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 = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; 
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); 
}, "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)); 
}, "只能输入中文");

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

Javascript 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
jQuery Validate初步体验(一)
Dec 12 #Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 #Javascript
jQuery同步提交示例代码
Dec 12 #Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 #Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 #Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 #Javascript
jQuery入门之层次选择器实例简析
Dec 11 #Javascript
You might like
PHP分页显示制作详细讲解
2008/11/19 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php7性能提升的原因详解
2019/10/13 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
js使用递归解析xml
2014/12/12 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Django 重写用户模型的实现
2019/07/29 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Linux文件操作命令都有哪些
2016/07/23 面试题
2014年两会学习心得体会
2014/03/10 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
运动会报道稿300字
2014/10/02 职场文书
超级礼物观后感
2015/06/15 职场文书
生日祝酒词大全
2015/08/10 职场文书
严以律己学习心得体会
2016/01/13 职场文书
民事纠纷协议书
2016/03/23 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书