首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

深入学习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表单验证的文章，大家可以结合进行学习。

深入学习jQuery Validate表单验证

- Author -

daliu_it

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Vue项目中引入外部文件的方法（css、js、less）
Jul 24 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
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
美国航天局(1) 天问一号(1) 毅力号(1) 塑料(1) 火星(2) 酶(1) 人造肉(1) 太空(1) 国际空间站(1) NASA(1)
You might like
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
手机端转换rem适应
2017/04/01 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
django创建超级用户过程解析
2019/09/18 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Tensorflow中的图（tf.Graph）和会话（tf.Session）的实现
2020/04/22 Python
如何转换一个字符串到enum值
2014/04/12 面试题
门卫班长岗位职责
2013/12/15 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python
css弧边选项卡的项目实践
2023/05/07 HTML / CSS