jQuery Validation PlugIn的使用方法详解


Posted in Javascript onDecember 18, 2015

一、用前必备 
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 
API: http://jquery.bassistance.de/api-browser/plugins.html 
当前版本:1.5.5 
需要JQuery版本:1.2.6+, 兼容 1.3.2 
<script src="../js/jquery.js" type="text/javascript"></script> 
<script src="../js/jquery.validate.js" type="text/javascript"></script>  
二、默认校验规则 

  • (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  

三、默认的提示 

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}.") 
},

如需要修改,可在js代码中加入: 

jQuery.extend(jQuery.validator.messages, { 
  required: "必选字段", 
remote: "请修正该字段", 
email: "请输入正确格式的电子邮件", 
url: "请输入合法的网址", 
date: "请输入合法的日期", 
dateISO: "请输入合法的日期 (ISO).", 
number: "请输入合法的数字", 
digits: "只能输入整数", 
creditcard: "请输入合法的信用卡号", 
equalTo: "请再次输入相同的值", 
accept: "请输入拥有合法后缀名的字符串", 
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), 
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), 
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), 
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), 
max: jQuery.validator.format("请输入一个最大为 {0} 的值"), 
min: jQuery.validator.format("请输入一个最小为 {0} 的值") 
});

推荐做法,将此文件放入messages_cn.js中,在页面中引入 
[codept src="../js/messages_cn.js" type="text/javascript"></script> [/code
四、使用方式 
1.将校验规则写到控件中 

<script src="../js/jquery.js" type="text/javascript"></script> 
<script src="../js/jquery.validate.js" type="text/javascript"></script> 
<script src="./js/jquery.metadata.js" type="text/javascript"></script> 
$().ready(function() { 
$("#signupForm").validate(); 
}); 
 
<form id="signupForm" method="get" action=""> 
 <p> 
  <label for="firstname">Firstname</label> 
  <input id="firstname" name="firstname" class="required" /> 
 </p> 
<p> 
<label for="email">E-Mail</label> 
<input id="email" name="email" class="required email" /> 
</p> 
<p> 
<label for="password">Password</label> 
<input id="password" name="password" type="password" class="{required:true,minlength:5}" /> 
</p> 
<p> 
<label for="confirm_password">确认密码</label> 
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" /> 
</p> 
 <p> 
  <input class="submit" type="submit" value="Submit"/> 
 </p> 
</form>

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

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
 
在使用equalTo关键字时,后面的内容必须加上引号,如下代码: 
class="{required:true,minlength:5,equalTo:'#password'}"
 
另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项) 
再有一种方式: 
$.metadata.setType("attr", "validate");

这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用  
2.将校验规则写到代码中   

$().ready(function() { 
$("#signupForm").validate({ 
  rules: { 
 firstname: "required", 
 email: { 
 required: true, 
 email: true 
 }, 
 password: { 
 required: true, 
 minlength: 5 
 }, 
 confirm_password: { 
 required: true, 
 minlength: 5, 
 equalTo: "#password" 
 } 
}, 
  messages: { 
 firstname: "请输入姓名", 
 email: { 
 required: "请输入Email地址", 
 email: "请输入正确的email地址" 
 }, 
 password: { 
 required: "请输入密码", 
 minlength: jQuery.format("密码不能小于{0}个字符") 
 }, 
 confirm_password: { 
 required: "请输入确认密码", 
 minlength: "确认密码不能小于5个字符", 
 equalTo: "两次输入密码不一致不一致" 
 } 
} 
 }); 
}); 
//messages处,如果某个控件没有message,将调用默认的信息 
 
<form id="signupForm" method="get" action=""> 
 <p> 
  <label for="firstname">Firstname</label> 
  <input id="firstname" name="firstname" /> 
 </p> 
<p> 
<label for="email">E-Mail</label> 
<input id="email" name="email" /> 
</p> 
<p> 
<label for="password">Password</label> 
<input id="password" name="password" type="password" /> 
</p> 
<p> 
<label for="confirm_password">确认密码</label> 
<input id="confirm_password" name="confirm_password" type="password" /> 
</p> 
 <p> 
  <input class="submit" type="submit" value="Submit"/> 
 </p> 
</form>

required:true 必须有值 
required:"#aa:checked"表达式的值为真,则需要验证 
required:function(){}返回为真,表时需要验证 
后边两种常用于,表单中需要同时填或不填的元素  

五、实例讲解

实例一:精简验证,通过表单对象调用validate()方法进行验证,验证规则通过html标签属性定义:以下为常用属性定义距离

class='required'

//必须字段
class='mail'

//邮箱验证
class='url'

//URL网址验证
class='date'

//正确的日期 格式满足 2012,0204,2012-02-04
class='number'

//输入合法的数字
class='digits'

//输入整数
minlength=''

//最小输入长度
maxlength=''

//最长输入长度(该值不会提示,当值达到一定字符数不可再增长)
max=''

//输入的数值小于指定值
min=''

//输入的数值大于指定值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <script type="text/javascript" src="messages_cn.js"></script>
 <style type="text/css">
 * { font-family: Verdana; font-size:13px; }
 input[type='text']{width:200px;}
 textarea{width:155px;}
 label { width: 10em; float: left; }
 label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
 </style>
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>
</head>
<body>
 <form id="commentForm" method="get" action="" >
 <fieldset>
 <legend>表单验证</legend>
 <p><label>Name</label><input name="name" class="required" maxlength="4" minlength="2" /></p>
 <p><label >E-Mail</label><input name="email" class="required email" /></p>
 <p><label >URL</label><input name="url" class="url"/></p>
 <p><label>text</label><textarea name="text" cols="22" class="required"></textarea></p>
 <p><input class="submit" type="submit" value="提交"/></p>
 </fieldset>
 </form>
</body>
</html>

实例二:方法验证,通过自定义表单规则来验证表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <script type="text/javascript" src="messages_cn.js"></script>
 <style type="text/css">
 * { font-family: Verdana; font-size:13px; }
 input[type='text']{width:200px;}
 textarea{width:155px;}
 .title{float:left;width:10em}
 em.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
 .field_notice{display:none;}
 .checking{display:none;}
 </style>
 <script>
 $(document).ready(function(){
  $("#commentForm").validate({
   errorPlacement: function(error, element){
    var error_td = element.next('em');
    error_td.find('.field_notice').hide();
    error_td.append(error);
   },
   success: function(label){
    label.addClass('validate_right').text('OK!');
   },
   onkeyup: false,
   rules: {
    name: {
     required:true,
     minlength:3,
     maxlength:40,
     remote:{
      url :'index.php?ajax=1',
      type:'get',
      data:{
       name : function(){
        return $('#name').val();
       }
      },
      beforeSend:function(){
       var _checking = $('#checking');
       _checking.prev('.field_notice').hide();
       _checking.next('label').hide();
       $(_checking).show();
      },
      complete :function(){
       $('#checking').hide();
      }
     }
    },
    email: {required: true, email: true },
    url:{required:true,url:true},
    text:"required"
   },
   messages: {
    name: {required:"需要输入名称", minlength:"名称长度在3-40个字符之间", maxlength:"名称长度在3-40个字符之间",remote:"用户名已存在"},
    email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"},
    url: {required:"需要输入URL地址", url:"URL地址格式不正确"},
    text:"需要输入文本内容"
   },
  });
 });
 </script>
</head>
<body>
 <form id="commentForm" method="get" action="" >
 <fieldset>
 <legend>表单验证</legend>
 <p><label class="title" >Name</label><input id="name" name="name"/>
  <em><label class="field_notice"></label><label id="checking" class="checking">检查中...</label></em>
 </p>
 <p><label class="title" >E-Mail</label><input name="email"/>
  <em><label class="field_notice"></label></em>
 </p>
 <p><label class="title" >URL</label><input name="url"/>
  <em><label class="field_notice"></label></em>
 </p>
 <p><label class="title" >text</label><textarea name="text" cols="22"></textarea>
  <em><label class="field_notice"></label></em>
 </p>
 <p><input class="submit" type="submit" value="提交"/></p>
 </fieldset>
 </form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js 替换
Feb 19 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
JavaScript计划任务后台运行的方法
Dec 18 #Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 #Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 #Javascript
jQuery Validate表单验证入门学习
Dec 18 #Javascript
You might like
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP编写RESTful接口
2016/02/23 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Bootstrap每天必学之折叠
2016/04/12 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
在Python中处理XML的教程
2015/04/29 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python JSON编解码方式原理详解
2020/01/20 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Django url 路由匹配过程详解
2021/01/22 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
会计专业自我评价
2014/02/12 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
酒会邀请函
2015/01/31 职场文书