jQuery插件 -- 表单验证插件jquery.validate.js

web开发作者:dayu日期:9天前点击:4
  • <scriptsrc="scripts/jquery-1.6.4.js"type="text/javascript"></script>
  • <scriptsrc="scripts/jquery.validate.js"type="text/javascript"></script>

  • 2.确定哪个表单需要被验证

    [javascript]view plaincopy
    print?

    1. <scripttype="text/javascript">
    2. ////<![CDATA[
    3. $(document).ready(function(){
    4. $("#commentForm").validate();
    5. });
    6. //]]>
    7. </script>

    3.针对不同的字段,进行验证规则编码,设置字段相应的属性

    [javascript]view plaincopy
    print?

    1. class="required"必须填写
    2. class="requiredemail"必须填写且内容符合Email格式验证
    3. class="url"符合URL格式验证
    4. minlength="2"最小长度为2

    可验证的规则有19种:

    [javascript]view plaincopy
    print?

    1. required:必选字段
    2. remote:"请修正该字段",
    3. email:电子邮件验证
    4. url:网址验证
    5. date:日期验证
    6. dateISO:日期(ISO)验证
    7. dateDE:
    8. number:数字验证
    9. numberDE:
    10. digits:只能输入整数
    11. creditcard:信用卡号验证
    12. equalTo:”请再次输入相同的值“验证
    13. accept:拥有合法后缀名的字符串验证
    14. maxlength/minlength:最大/最小长度验证
    15. rangelength:字符串长度范围验证
    16. range:数字范围验证
    17. max/min:最大值/最小值验证

    另个一种验证方法(将所有的与验证相关的信息写到class属性中方便管理)

    1.引入一个新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

    [javascript]view plaincopy
    print?

    1. <scriptsrc="scripts/jquery.metadata.js"type="text/javascript"></script>

    2.改变调用的验证方法

    [javascript]view plaincopy
    print?

    1. <scripttype="text/javascript">
    2. ////<![CDATA[
    3. $(document).ready(function(){
    4. //将$("#commentForm").validate();改成
    5. $("#commentForm").validate({meta:"validate"});
    6. });
    7. //]]>
    8. </script>

    3.将验证规则全部编写到class属性中

    [javascript]view plaincopy
    print?

    1. class="{validate:{required:true,minlength:2,messages:{required:‘请输入姓名‘,minlength:‘请至少输入两个字符‘}}}"
    2. class="{validate:{required:true,email:true,messages:{required:‘请输入电子邮件‘,email:‘请检查电子邮件的格式‘}}}"

    也可以通过name属性来关联字段和验证规则的验证写法(验证行为和HTML结构完全脱钩)

    [javascript]view plaincopy
    print?

    1. $("#commentForm").validate({
    2. rules:{
    3. username:{
    4. required:true,
    5. minlength:2
    6. },
    7. email:{
    8. required:true,
    9. email:true
    10. },
    11. url:"url",
    12. comment:"required"
    13. },
    14. messages:{
    15. username:{
    16. required:‘请输入姓名‘,
    17. minlength:‘请至少输入两个字符‘
    18. },
    19. email:{
    20. required:‘请输入电子邮件‘,
    21. email:‘请检查电子邮件的格式‘
    22. },
    23. url:‘请检查网址的格式‘,
    24. comment:‘请输入您的评论‘
    25. }
    26. });

    国际化

    Validation插件的验证信息默认语言是英文,如果要改成中文,只需要引入Validation提供的中文验证信息即可,引入代码如下:

    [javascript]view plaincopy
    print?

    1. <scriptsrc="scripts/jquery.validate.messages_cn.js"type="text/javascript"></script>

    自定义验证信息并美化

    [javascript]view plaincopy
    print?

    1. errorElement:"em",//可以用其他标签,记住把样式也对应修改
    2. success:function(label){//label指向上面那个错误提示信息标签em
    3. label.text("")//清空错误提示消息
    4. .addClass("success");//加上自定义的success类
    5. }
    6. 在CSS中添加样式与之关联
    7. em.error{
    8. background:url("images/unchecked.gif")no-repeat0px0px;
    9. padding-left:16px;
    10. }
    11. em.success{
    12. background:url("images/checked.gif")no-repeat0px0px;
    13. padding-left:16px;
    14. }

    自定义验证规则

    [javascript]view plaincopy
    print?

      1. //自定义一个验证方法
      2. $.validator.addMethod(
      3. "formula",//验证方法名称
      4. function(value,element,param){//验证规则
      5. returnvalue==eval(param);
      6. },
      7. ‘请正确输入数学公式计算后的结果‘//验证提示信息
      8. );
      9. $("#commentForm").validate({
      10. rules:{
      11. username:{
      12. required:true,
      13. minlength:2
      14. },
      15. email:{
      16. required:true,
      17. email:true
      18. },
      19. url:"url",
      20. comment:"required",
      21. valcode:{
      22. formula:"7+9"
      23. }
      24. },
      25. messages:{
      26. username:{
      27. required:‘请输入姓名‘,
      28. minlength:‘请至少输入两个字符‘
      29. },
      30. email:{
      31. required:‘请输入电子邮件‘,
      32. email:‘请检查电子邮件的格式‘
      33. },
      34. url:‘请检查网址的格式‘,
      35. comment:‘请输入您的评论‘,
      36. valcode:‘验证码错误‘
      37. }
      38. });

    jQuery插件 -- 表单验证插件jquery.validate.js

    原文地址:http://www.cnblogs.com/dxqNet/p/7199617.html


    下一篇       上一篇