jQuery Validate(表单验证)例子

一、介绍

jQueryValidate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL和电子邮件验证，同时提供了一个用来编写用户自定义方法的API。

         该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.15.0。访问jQueryValidate 官网，下载最新版的 jQuery Validate 插件。

         插件的默认校验规则，默认提示信息（英文提示）及一些运用简介访问jQueryValidate菜鸟教程。

 

二、使用例子

   首先将jQuery Validate插件导入html文档中，

   接着将校验规则写到控件中（js文档）。

var validator;//定义一个验证变量
$(function() {
    validator = formValidator("#createForm");//调用验证函数
});

//定义一个存储的函数，往后台存数据时，必须所有数据符合所有格式要求。

functionaccountSave() {

if(validator.form()){ //validator.form()返回一个Boolean值，为true时，表单所有数据符合格式要求

   //存储代码

    }

//定义表单验证函数
function formValidator(formName) {
    return $(formName).validate({
        submitHandler: function(form) {
            $(form).submit(); //提交表单
        },
        onfocusout : function(element) {
            $(element).valid();//启用当前点击input的鼠标事件
        },
rules: {
            code: { //表单中的一条input数据中的name属性
                required: true, //插件默认内置验证规则
                integer：true, //自定义无参验证规则
isExitsNameId：["employee/findEmployeeCode","employeId","employeeCode"]//自定义有参验证规则。
            },
            userName: {
                required: true,
            }
        },
        messages: {
            code: {
integer："工号必须为正整数",
isExitsNameId:"该工号已经存在"
            },
            email: {
            }
        },
        errorPlacement: function (error, element) {//定义错误信息放置处
            error.appendTo(element.closest("input").next());//当前input的下一个同辈元素
        },
        focusInvalid: true,
        success:function(e){} //验证成功的函数，可以没有函数体，但是必须存在。
    });

}

/**

*除了插件内置的验证规则，还可以自定义验证规则，其定义方法为：

*addMethod(name,method,message)方法

*参数 name 是添加的方法的名字。

*参数method 是一个函数，接收三个参数 (value,element,param)。
*value 是元素的值，element 是元素本身，param 是参数（可以是多个参数，使用时从param[0]开始）。

*/

//正整数验证      
jQuery.validator.addMethod("integer", function(value, element, param) { 
return this.optional(element) || /^[1-9]\d*$/.test(value);  
}, "请输入正整数");

/**
 * 重名验证
 */

function isExitsNameId(value, url, paramId, paramName) { 
    var meg = true;
    var id = $("#id").val();
    $.ajax({
        type: "get",  
        dataType: "json",
        async : false,
        url: url, 
        data: paramId +"="+ encodeURI(id) +"&"+ paramName +"="+ encodeURI(value),
        success: function(data){
            meg = data;
        }  
    });
    return meg;
} 

以上只是一个简单的例子，希望能给大家一些帮助。