你的位置:首页 > Java教程

[Java教程]【jQuery基础学习】06 jQuery表单验证插件


 jQuery的基础部分前面都讲完了,那么就看插件了。

关于jQuery表单验证插件-Validation

validation特点:

  •  内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
  • 自定义验证规则:可以很方便地自定义验证规则
  • 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能
  • 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证

使用方法:

  1. 引用jQuery库和Validation插件
    <script type="text/javascript" src="jquery-2.2.0.min.js"></script><script type="text/javascript" src="jquery.validate.min.js"></script>

  2. 确定哪个表单需要被验证,那么就调用即可
    $("#myForm").validate();

  3. 针对不同的字段,进行验证规则编码,设置字段相应的属性
    <input id="username" name="username" class="required email" minilength="2" /><!--在上面设置 required为必填,email验证是否为邮箱,如果是url就验证是否为url,minilength=2为最小长度为2---->

更好的使用方法:

  下面的玩法是为了实现与HTML元素无关联,通过name属性来关联字段和验证规则的验证写法,这种写法能实现行为和结构的分离。

  • 页面
    <input id="myname" name="username"/>

  • 代码
      $("#myform").validate({    rules:{      username:{        required:true,        minlength:2,        email:true      },      url:"url",      comment:"required"    }  });

国际化

  就是这个插件的验证信息默认是英文的。那么要弄成中文,就要引用新的文件:

  jquery.validate.messages_cn.js

自定义验证信息

  valication插件可以很方便地自定义验证规则。

  $("#myform").validate({    rules:{      username:{        required:true,        minlength:2,        email:true      }    }    ,messages:{      username:{        required:'请输入账户邮箱',
email:'请输入正确的邮箱地址' } } });

自定义验证信息并美化

  例如为验证提示信息加入图片:

   $("#myform").validate({    rules:{      username:{        required:true,        minlength:2,        email:true      }          }    ,errorElement:"myErrorElement"//用来创建错误信息提示标签    ,success:function(label){//验证成功后执行的回调函数      //label指向上面那个错误提示信息标签myErrorElement      label.text("") //清空错误消息提示         .addClass("success");//加入自定义的success类    }  });

    然后在css里面加入对应样式:

myErrorElement.error{  background:url("2.ico") no-repeat 0px 0px;  padding-left:48px;}myErrorElement.success{  background:url("1.png") no-repeat 0px 0px;  padding-left:48px;}

自定义验证规则

以下为用此jQuery插件实现验证码功能的代码

  • 页面
    <p>  <label for="myValcode">验证码</label>  <input id="myValcode" name="valcode">=7+9</p>

  • 代码
      //自定义一个验证方法  $.validator.addMethod(    "formula",    function(value,element,param){      return value==eval(param);    },    '请正确输入数学公式计算后的结果'  );  //调用该验证规则  $("#myform").validate({    rules:{      username:{        required:true,        minlength:2,        email:true      },      valcode:{formula:7+9}    }  });