jQuery验证插件validation使用指南

在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。

jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate

jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。

1.jquery.validate插件功能

简单实现客户端信息验证，过滤不符合要求的信息

2.jquery.validate官方地址

官方地址：http://jqueryvalidation.org/,有详细的插件使用说明

官方demo：http://jquery.bassistance.de/validate/demo/

3.jquery.validate使用方法

1.引用js

2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。

.error{
  color:red;
  margin-left:8px;
}

3.js代码

$(document).ready(function() {
  // validate signup form on keyup and submit
  var validator = $("#signupform").validate({
    rules: {
      firstname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      password_confirm: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true,
      },
      dateformat: "required",
      terms: "required"
    },
    messages: {
      firstname: "姓名不能为空",
      username: {
        required: "用户名不能为空",
        minlength: jQuery.format("用户名只少由 {0} 字符组成")
      },
      password: {
        required: "密码不能为空",
        minlength: jQuery.format("密码只少由 {0} 字符组成")
      },
      password_confirm: {
        required: "确认密码不能为空",
        minlength: jQuery.format("确认密码只少由 {0} 字符组成"),
        equalTo: "秘密与确认密码不一致"
      },
      email: {
        required: "邮箱不能为空",
        email: "邮箱格式不正确"
      },
      dateformat: "请选择性别",
      terms: " "
    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
      if ( element.is(":radio") )
        error.appendTo( element.parent().next().next());
      else if ( element.is(":checkbox") )
        error.appendTo ( element.next());
      else
        error.appendTo( element.parent().next());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
      alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
      // set   as text for IE
      label.html(" ").addClass("checked");
    },
    highlight: function(element, errorClass) {
      $(element).parent().next().find("." + errorClass).removeClass("checked");
    }
  });
});

以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如

$.validator.addMethod("checkUserName", function(value) {

    //value为验证的值，对应于元素id

  //方法代码

}, '用户名格式不正确');

使用自定义方法也非常简单，只需要 元素id:”checkUserName”

4.使用的html

   

   

    
姓名
    

    

   
   

    
用户名
    

    

   
   

    
密码
    

    

   
   

    
确认密码
    

    

   
   

    
邮箱
    

    

   
         

    
性别
    

    

    


    

      

        
        男
      
      

        
        女
      
      

      
    
    
    
    
   

   

    
 
    

      

        
        以阅读并同意网站条款.
      
 
    
   
   

    

    

    
    
   

   

更多验证方法的应用请查看http://jqueryvalidation.org/