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 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
js实现抽奖功能
Nov 24 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简洁函数小结
2011/08/12 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
公司年会演讲稿范文
2014/01/11 职场文书
房屋转让协议书范本
2014/04/11 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书