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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
javascript基础知识
Jun 07 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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
global.php
2006/12/09 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
numpy排序与集合运算用法示例
2017/12/15 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python实现多层感知器
2019/01/18 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
python框架django项目部署相关知识详解
2019/11/04 Python
numpy 声明空数组详解
2019/12/05 Python
详解Python实现进度条的4种方式
2020/01/15 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2015年消防工作总结
2015/04/24 职场文书
企业法人任命书
2015/09/21 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL