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;

}

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