jQuery Validate初步体验(一)


Posted in Javascript onDecember 12, 2015

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="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" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate({
  rules : {
  username : {
   required : true,
   rangelength:[2,10]
  },
  password : {
   required : true,
   minlength:6
  },
  confirmpassword : {
   required : true,
   equalTo:"#cpassword"
  },
  email : {
   required : true,
   email : true
  }
  },
  messages : {
  username : {
   required : '请输入姓名',
   rangelength:'长度在 {0} 到 {1} 之间'
  },
  password : {
   required : '请输入密码',
   minlength:'密码不能少于 {0}位'
  },
  confirmpassword : {
   required : '请再次输入密码',
   equalTo:'两次输入的密码不一致'
  },
  email : {
   required :'请输入邮箱',
   email : '请输入有效的电子邮件地址'
  }
  }
 });
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text"/>
  </p>
  <p>
  <label for="cpassword">密码</label> 
  <input id="cpassword" name="password" type="password"/>
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password"/>
  </p>
  <p>
  <label for="cemail">邮箱</label>
  <input id="cemail" name="email" type="email"/>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

首先这里有一个方法调用: $("#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), 汉语, ?h?)
 */
$.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="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.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" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

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

以上就是我今天下午学习的收获了。据说在新版本中,又有了新的写法,既不需要依赖上面提到的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初步体验(二),一起学习吧。

Javascript 相关文章推荐
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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
jQuery使用$.ajax提交表单完整实例
Dec 11 #Javascript
You might like
从手册去理解分析PHP session机制
2011/07/17 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP.vs.JAVA
2016/04/29 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python如何在列表、字典中筛选数据
2018/03/19 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python 重命名轴索引的方法
2018/11/10 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
男方父母证婚词
2014/01/12 职场文书
高中毕业自我评价
2014/02/08 职场文书
美术毕业生求职信
2014/02/25 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
岗位职责范本大全
2015/02/26 职场文书
同意转租证明
2015/06/24 职场文书
人事任命书范本
2015/09/21 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技