Validation 表单验证 插件 jQuery 验证 数字 日期 （一）

一、validate是jQuery的一个表单验证插件，它不仅实现了客户端表单的多种验证规则，而且，还是用ajax实现了服务器端远程验证。它内置有多种验证规则，同时，可以很方便的定义自己的规则。在此，说明一些常用的功能，详细的介绍，可以参考官方文档。http://docs.jquery.com/Plugins/Validation

validation插件使用很简单：
Javascript代码
$("#formId").validate(
{
// 验证规则
rules:
{},
// 验证提示信息（失败时）
message:{},
errorElement: 'span', // 放置错误信息的元素，可以是其他的。
errorPlacement: function(error,element) // 将错误提示信息放在什么地方
{},
// 成功时执行
success: function(label)
{
label.text(" ") // 将错误内容清空，一定要是" "有空格，否则IE有问题。
.addClass("success");

}
});

$("#formId").validate(
{
// 验证规则
rules:
{},
// 验证提示信息（失败时）
message:{},
errorElement: 'span', // 放置错误信息的元素，可以是其他的。
errorPlacement: function(error,element) // 将错误提示信息放在什么地方
{},
// 成功时执行
success: function(label)
{
label.text(" ") // 将错误内容清空，一定要是" "有空格，否则IE有问题。
.addClass("success");

}
});

其中"formId"是表单的form元素的ID属性。

rules和message分别都对应一个对象，该对象只包含属性，其中，属性名为表单中input的name（包括select的name)，值为要应用的规则对象。如：
Javascript代码
rules:{
userName:{
required:true,
maxlength:20,
emote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据，默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}
}
}

rules:{
userName:{
required:true,
maxlength:20,
emote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据，默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}
}
}

message对应是一样的，只是把规则的值改为提示信息，如：required:‘必填项'。

validation内置的验证规则如下：

required:true 必填

minlength:最小长度

maxlength:最大长度

rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串

range:[100,1000] 只能是100和 1000 之间的值”

min:最小值

max:最大值

email:true 验证邮箱

url:true 验证是否是合法的网址

date:true 验证是否是合法的日期 new Date() 类型格式

dateISO:true 验证是否是合法的日期 年/月/日 或 年-月-日 格式

number:true 验证是否是合法的数字

digits:true 验证是否为整数

creditcard: 验证合法的信用卡号

equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同

accept: “gif|png|jpg” 验证是否是合法后缀名的字符串
Javascript代码
remote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据，默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}

remote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据，默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}

注意：remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod方法实现的，语法为：jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名称，function定义验证的规则，message是验证失败时的提示信息。如：

Javascript代码
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
/**
* 自定义验证规则——对电话号码进行验证
*/
$.validator.addMethod(
"isPhone",
function(value, element)
{
// “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种：010-82839278、(010)82839278、01082839278等，但是，这样有一个问题
// 如：(01082839278这样的也会匹配。当然可以用分支条件"|"解决，比较麻烦。而且以什么开始或结束也没有匹配。
// 为了简单起见，去掉有"()"的形式。匹配区号3位，则本地号8位，区号4位，则本地号7位的号码。
var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
return this.optional(element) || (tel.test(value));
}
, "电话号码格式不对."
);

jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
/**
* 自定义验证规则——对电话号码进行验证
*/
$.validator.addMethod(
"isPhone",
function(value, element)
{
// “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种：010-82839278、(010)82839278、01082839278等，但是，这样有一个问题
// 如：(01082839278这样的也会匹配。当然可以用分支条件"|"解决，比较麻烦。而且以什么开始或结束也没有匹配。
// 为了简单起见，去掉有"()"的形式。匹配区号3位，则本地号8位，区号4位，则本地号7位的号码。
var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
return this.optional(element) || (tel.test(value));
}
, "电话号码格式不对."
);