深入学习jQuery Validate表单验证


Posted in Javascript onJanuary 18, 2016

本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下

1、添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面。
2、需要改写触发校验的方式。

$("#commentForm").validate({meta: "validate"});

3、详细代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

默认校验规则:

  • (1)required:true               必输字段
  • (2)remote:"check.php"          使用ajax方法调用check.php验证输入值
  • (3)email:true                  必须输入正确格式的电子邮件
  • (4)url:true                    必须输入正确格式的网址
  • (5)date:true                   必须输入正确格式的日期 日期校验ie6出错,慎用
  • (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

默认提示:

messages: {
  required: "This field is required.",
  remote: "Please fix this field.",
  email: "Please enter a valid email address.",
  url: "Please enter a valid URL.",
  date: "Please enter a valid date.",
  dateISO: "Please enter a valid date (ISO).",
  dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
  number: "Please enter a valid number.",
  numberDE: "Bitte geben Sie eine Nummer ein.",
  digits: "Please enter only digits",
  creditcard: "Please enter a valid credit card number.",
  equalTo: "Please enter the same value again.",
  accept: "Please enter a value with a valid extension.",
  maxlength: $.validator.format("Please enter no more than {0} characters."),
  minlength: $.validator.format("Please enter at least {0} characters."),
  rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
  range: $.validator.format("Please enter a value between {0} and {1}."),
  max: $.validator.format("Please enter a value less than or equal to {0}."),
  min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

4、效果图如下:

深入学习jQuery Validate表单验证

5、注意:
使用 class="{}" 的方式,必须引入包:jquery.metadata.js。
可以使用如下的方法,修改提示内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用 equalTo 关键字时,后面的内容必须加上引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

6、直接在class属性里面定义错误信息的提示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中(2)</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中(2)</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

7、效果如下:

 深入学习jQuery Validate表单验证

以上就是本文的全部内容,希望对大家学习jQuery Validate表单验证有所帮助,最近更新了不少关于jQuery Validate表单验证的文章,大家可以结合进行学习。

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
javascript实现弹出层效果
Dec 10 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 #Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 #Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 #Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 #Javascript
jquery validate表单验证的基本用法入门
Jan 18 #Javascript
You might like
php数组去重实例及分析
2013/11/26 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
python实现简易内存监控
2018/06/21 Python
Tensorflow累加的实现案例
2020/02/05 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
会计电算化大学生职业规划书
2014/02/05 职场文书
建筑节能汇报材料
2014/08/22 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2015年司法所工作总结
2015/04/27 职场文书
超市食品安全承诺书
2015/04/29 职场文书
英雄儿女观后感
2015/06/09 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书