jquery validator 插件 jquery validate

★  第一部分：HelloWorld

1. jQuery.validate插件的作用

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

2. HelloWorld

说明：需要JQuery版本：1.2.6+

步骤：

1，导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒

<script type="text/javascript" src="jquery.js">
 <script type="text/javascript" src="jquery.metadata.js">
 <script type="text/javascript" src="jquery.validate.js">

2，指定哪个（或哪些）表单要在提交前先进行验证

<script type="text/javascript">
   
        
    
</script>

3，指定每个字段的验证规则
名称 *<input type="text"name="loginName" class="required">
其中class="required"表示本字段必须要填写。

 

效果如下图：

 

★  第二部分：基础知识

1. 指定验证规则的方式

1.1. 把验证规则写到字段元素的class属性中

例：

用户名：<inputtype="password" name="password" class="required">

电子邮件：<inputtype="text" name="email" class="required email">

密码：<inputtype="password" name="password" id="password1"

class="{required:true, minlength: 3}">

再次输入密码：<inputtype="password" name="password2"

class="{equalTo:'[#password1]'} required">

 

以上用了两种方式：

1，指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class="requiredemail"。

2，使用JSON对象，指定多个属性，如：class="{required:true, minlength: 3}"。可以为某验证规则指定所用的参数，如minlength规则需要指定最小长度，这里为3。

3，混合使用，如：class="{equalTo:'[#password1]'}required"。

 

说明：

1，如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。

2，如果表单字段的name不能重复，则只有最前面的配置起作用。

1.2. 调用validate()方法时指定验证规则

$(function() {
{
       rules: {
           loginName:{ required: true, minlength: 2},
           password: { required: true },
           password2: { equalTo: "#password1" }
        }
    });
});

2. 可以使用哪些验证规则（内置的验证规则）

required:true	必填字段
remote:"/"	使用ajax方式访问”/”，通过返回true或false表示输入值通过或未通过验证
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期
dateISO:true	必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"expr"	输入值必须和$(“expr”)的值相同， expr例子：#fieldId
accept: "gif|png|jpg"	输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’|’隔开
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:3	输入长度最小是3的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

说明：

1，remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。

2，例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：

$().ready(function(){
         $.ajaxSetup ({
                 cache: false //关闭ajax相应的缓存
          });
      });

3，某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。

 

3. 有关错误提示消息

3.1. 更改默认的错误提示消息

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}的值")
});

3.2. 仅对当前表单改变提示消息

方法一：在class中指定某验证规则的错误消息

<input type="file" name="parResource" 
class="{
   required: true, accept: 'zip', 
   messages: {required:'请选择文件', accept:'请选择正确的文件'}
}">    （提示：使用时不能换行）

方法二：在调用validate()方法时指定某验证规则的错误消息

$(function() {
{
       messages:{
            username:{required: "请填写用户名" },
           email: { required: '请填写email', email: "请填与正确的email"}
        }
    });
});

3.3. 设置错误消息的显示样式

指定label.error的样式就可以了，如下：

<style type="text/css">
    label.error{
        margin-left: 10px;
        color: red;
    }
</style>

 

说明：label.error指class为error的label元素，如：

<label for="username" class="error">

★  第三部分：扩展

1. 自定义验证规则

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：

jQuery.validator.addMethod("name",function,message)

其中:

1，name为验证规则的名称

2，function定义验证的规则。参数有?。返回值为?。

3，message是验证失败时的提示信息。

 

2. 让错误提示信息显示到指定的位置

$(function(){
    $("form").validate({wrapper:'div'});
});

3.   对于radio与checkbox等的验证指定

4.   附录

 

 

 

 

jquery.validate remote 和 自定义验证方法

$(function(){
var validator =$("#enterRegForm").validate({
 debug:false, //调试模式取消submit的默认提交功能
 //errorClass: "error",//默认为错误的样式类为：error
 //validClass: "check",//验证成功后的样式，默认字符串valid
 focusInvalid: true,//表单提交时,焦点会指向第一个没有通过验证的域
 //focusCleanup:true;//焦点指向错误域时，隐藏错误信息，不可与focusInvalid一起使用！
 onkeyup: true,
 errorElement: "div",
 submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
 form.submit(); //提交表单
 },rules: { 
"enterprise.enName": {
  required: true,
  minlength: 6,
  remote:{
   url: "/nameServlet",    //后台处理程序 
  type: "get",              //数据发送方式
   dataType: "json",          //接受数据格式   
  data: {                    //要传递的数据
    enName: function() {
    return $("#enName").val();
    }
   }
  
}
 },"user.passWord":{
  required:true,
  rangelength:[6,18]
 },
 passWordConf:{
  required:true,
  rangelength:[6,18],
  equalTo:"#passWord" //此处的passWord是<input id="passWord">一开始还以为是name的值呢，气死了
}},
messages: { //自定义验证消息
 "enterprise.enName": {
  required: "请填写企业名称！",
  minlength: $.format("至少要{0}个字符！"),
  remote:$.format("该企业名称已存在！")
  
},
 "user.passWord":{
   required:"请填写确认密码！",
   rangelength:$.format("密码要在{0}-{1}个字符之间！")
  },
 passWordConf:{
   required:"请填写确认密码！",
   rangelength:$.format("确认密码要在{0}-{1}个字符之间！"),
   equalTo:"确认密码要和密码一致！"
  },errorPlacement:function(error, element) { //验证消息放置的地方
 //error.appendTo(element.parent("td").next("td").children(".msg"));
  error.appendTo(element.parent(".field").next("div"));
 },
 highlight: function(element, errorClass) { //针对验证的表单设置高亮
 $(element).addClass(errorClass);
 },
 success: function(div) {
 div.addClass("valid");
 }
 });});

自定义方法;

新建一个js文件：$(document).ready(function(){
  字符最小长度验证（一个中文字符长度为2）
    jQuery.validator.addMethod("stringMinLength", function(value, element,param) {
      var length = value.length;
      for ( var i = 0; i <value.length; i++) {
       if (value.charCodeAt(i)> 127) {
        length++;
       }
      }
      return this.optional(element) ||(length >= param);
    长度不能小于{0}!"));
    
   字符最大长度验证（一个中文字符长度为2）
    jQuery.validator.addMethod("stringMaxLength", function(value,element, param) {
      var length = value.length;
      for ( var i = 0; i <value.length; i++) {
       if (value.charCodeAt(i)> 127) {
        length++;
       }
      }
      return this.optional(element) ||(length <= param);
    长度不能大于{0}!"));// 字符验证      
  jQuery.validator.addMethod("stringCheck",function(value, element) {       
     return this.optional(element)|| /^[/u0391-/uFFE5/w]+$/.test(value);       
 只能包括中文字、英文字母、数字和下划线");   
   
 中文字两个字节      
  jQuery.validator.addMethod("byteRangeLength",function(value, element, param) {       
      var length =value.length;       
      for(var i = 0; i< value.length; i++){       
         if(value.charCodeAt(i) > 127){       
         length++;       
         }       
      }       
      returnthis.optional(element) || ( length >= param[0] && length <=param[1] );

 
 请确保输入的值在3-15个字节之间(一个中文字算2个字节)");   
    
 字符验证
 

jQuery.validator.addMethod("string", function(value, element) {
      return this.optional(element) ||/^[/u0391-/uFFE5/w]+$/.test(value);
    不允许包含特殊符号!");
    必须以特定字符串开头验证
     jQuery.validator.addMethod("begin",function(value, element, param) {
      var begin = newRegExp("^" + param);
      return this.optional(element) ||(begin.test(value));
    必须以 {0}开头!"));
    验证两次输入值是否不相同
    jQuery.validator.addMethod("notEqualTo", function(value, element, param){
      return value != $(param).val();
    两次输入不能相同!"));
  // 验证值不允许与特定值等于
    jQuery.validator.addMethod("notEqual", function(value, element,param) {
      return value != param;
    输入值不允许为{0}!"));
    
   验证值必须大于特定值(不能等于)
     jQuery.validator.addMethod("gt",function(value, element, param) {
      return value > param;
    输入值必须大于{0}!"));
    
   验证值小数位数不能超过两位
    jQuery.validator.addMethod("decimal", function(value, element) {
      var decimal =/^-?/d+(/./d{1,2})?$/;
      return this.optional(element) ||(decimal.test(value));
    小数位数不能超过两位!"));
  字母数字
     jQuery.validator.addMethod("alnum",function(value, element) {
     return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
    只能包括英文字母和数字");
  // 汉字
    jQuery.validator.addMethod("chcharacter", function(value, element) {
     var tel = /^[/u4e00-/u9fa5]+$/;
     return this.optional(element) ||(tel.test(value));
    请输入汉字");
  身份证号码验证      
  jQuery.validator.addMethod("isIdCardNo",function(value, element) { 
      returnthis.optional(element) ||/^[1-9]/d{7}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])/d{3}$/.test(value)||/^[1-9]/d{5}[1-9]/d{3}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])((/d{4})|/d{3}[A-Z])$/.test(value);       
 请正确输入您的身份证号码");

       
 手机号码验证      

jQuery.validator.addMethod("isMobile",function(value, element) {       
      var length =value.length;   
      var mobile =/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;   
      returnthis.optional(element) || (length == 11 && mobile.test(value));

 请正确填写您的手机号码");       
       
 电话号码验证      
 

jQuery.validator.addMethod("isTel", function(value,element) {       
      var tel =/^/d{3,4}-?/d{7,9}$/;   电话号码格式010-12345678   
      returnthis.optional(element) || (tel.test(value));

 请正确填写您的电话号码");   
    
 联系电话(手机/电话皆可)验证  

jQuery.validator.addMethod("isPhone",function(value,element) {   
      var length =value.length;   
      var mobile =/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;   
      var tel =/^/d{3,4}-?/d{7,9}$/;   
      returnthis.optional(element) || (tel.test(value) || mobile.test(value));

    
 请正确填写您的联系电话");   
       
 邮政编码验证      

jQuery.validator.addMethod("isZipCode",function(value, element) {       
      var tel =/^[0-9]{6}$/;       
      returnthis.optional(element) || (tel.test(value));       
 请正确填写您的邮政编码");    
  });

 

该文件要先被引用再对form进行验证。

注意：remote中的url 为servlet，但是这个servlet该怎么写呢

一开始以为是跟平时的一样：out.println("用户名"+name+"已存在！");

虽然可以验证，但是还是存在问题：输入个不存在的name还是提示存在。

后来还是Google，看到别人也是犯了这样的错误，解决方法时返回true,false.

但是 doGet是void类型的，return true是行不通的。

后来又请教群里的高手，正确写法是out.println("true");就可以了。

哎，费了老长时间

总算是把问题给解决了。

 

错误存放位置：

<form id="myform" action="">
 <label>UserName: </label>
 <input id="username" name="username"/>
 <br>
 <label>password: </label>
 <input id="password" name="password"/>
 <br>

 <div id="error_username" >error: </div>

 <br>
 <input  type="submit" value="Submit"/>
 </form>

 $("#myform").validate({
         rules: {
            username: {required:true}
         },
         errorPlacement: function(error,element) {   
        if(element.attr("name") == "username" )  {
            
           error.appendTo("#error_username"); 
        } 
        else    
           error.insertAfter(element); 
        }