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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
将查询条件的input、select清空
Jan 14 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
vue-router 控制路由权限的实现
Sep 24 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
django如何实现视图重定向
2019/07/24 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python十进制转二进制的详解
2020/02/07 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
教师新年寄语
2014/04/03 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
MySQL派生表联表查询实战过程
2022/03/20 MySQL