夏日博客

A-A+

jquery表单验证控件:Form-Validate例子

2016年01月09日 前端设计 暂无评论 阅读 5 views 次

Validate是一个非常强大的jquery表单验证控件了，我们可以利用它来帮助我们在用户注册或一些数据填写时进行校验了，下面一起来看jquery表单验证控件:Form-Validate使用教程吧，希望下文可以帮助到大家．

在做登录注册模块的时候, 我们需要要求用户按照我们的规则进行信息的填写, 如果直接在填写完成之后提交的时候验证这些信息的话, 对于用户来说不得不说是一个比较烂的体验, form-validate控件是一个超强大的表单验证控件, 包含了简单的规则验证, 异步验证等等, 并且该控件可以自定义验证规则.既方便又实用.

官网下载form-validate之后, 在页面上引入jquery.validate.min.js文件, 注意: 在这之前必须先引入Jquery库;

  1. <script src="/js/jquery.min.js" type="text/javascript"></script>  
  2. <script src="/js/jquery.validate.min.js" type="text/javascript"></script>  

需要验证的Form表单元素

  1. <div class="form-group">  
  2.     用户名:<input type="text" id="username" name="username" />  
  3. </div>  
  4. <div class="form-group">  
  5.     密　码:<input type="password" id="password" name="password" />  
  6. </div>  
  7. <div class="form-group">  
  8.     确认密码:<input type="password" id="repassword" name="repassword" />  
  9. </div>  
  10. <div class="form-group">  
  11.     邮箱地址:<input type="text" id="email" name="email" />  
  12. </div>  
  13. 定义一个js文件,编写验证代码  
  14. // 自定义验证规则  
  15. // 验证用户名格式  
  16. jQuery.validator.addMethod("username", function(value, element) {     
  17.     var user = /^[a-zA-Z][w]{4,16}$/;  
  18.     return this.optional(element) || (user.test(value));  
  19. }, "以字母开头，5-17 字母、数字、下划线'_'");  
  20. // 添加子用户表单验证  
  21. $('#addUser').validate({  
  22.     errorElement: 'span',     // 默认的错误信息元素  
  23.     errorClass: 'help-block', // 默认的错误信息类名  
  24.     focusInvalid: false,     // 未通过验证的第一个表单元素获得焦点  
  25.     // 基础规则验证  
  26.         rules : {  
  27.            username : {  
  28.                required : true,  
  29.                username : true,  
  30.            },  
  31.            password : {  
  32.                required : true,  
  33.                username : true  
  34.            },  
  35.            repassword : {  
  36.                required : true,  
  37.                equalTo : '#password'  
  38.            },  
  39.             email: {  
  40.                 required: true,  
  41.                 email: true,  
  42.                 remote : {  
  43.                     url : 'checkEmail.php',  
  44.                     type : 'post',  
  45.                     dataType : 'json',  
  46.                     data : {  
  47.                         email : function () {  
  48.                             return $('#email').val();  
  49.                         }  
  50.                     }  
  51.                 }  
  52.             }  
  53.         },  
  54.         // 提示信息  
  55.         messages : {  
  56.            username : {  
  57.                required : '用户名不能为空'  
  58.            },  
  59.            password : {  
  60.                required : '密码不能为空'  
  61.            },  
  62.            repassword: {  
  63.                 required: "确认密码不能为空.",  
  64.                 equalTo : '两次密码输入不正确'  
  65.             },  
  66.             email: {  
  67.                 required: "邮箱不能为空.",  
  68.                 email: "请输入正确格式的邮箱地址",  
  69.                 remote: "该邮箱已经被注册."  
  70.             }  
  71.         }  
  72.     });  
  73. });  

至此一个完整的表单验证就写好了, 为了保证数据的严谨, 最好在后面提交的时候在进行一次验证, 如果再配合验证码就更合适不过了.

标签：

给我留言