jQuery Validate的使用发法和自定义验证方法的实现

插件简介

使用步骤

自定义一些验证方法
手机号码的验证

汉字的验证

邮编的验证

1.插件简介

validate为表单提供了强大的验证功能，让客户表达验证变得简单。同时提供了大量的定制选项，满足应用程序的各种需求。

2.使用步骤

（1） 下载地址：`http://jqueryvalidation.org/`。
按照顺序引入一下的js文件：

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js" ></script>
<script src="js/messages_zh.js"></script>

（2）默认的校验规则：

1 required:true 必须输入的字段。

2 remote:”check.php” 使用 ajax 方法调用 check.php 验证输入值。

3 email:true 必须输入正确格式的电子邮件。

4 url:true 必须输入正确格式的网址。

5 date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。

6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，

1998/01/22。只验证格式，不验证有效性。

7 number:true 必须输入合法的数字（负数，小数）。

8 digits:true 必须输入整数。

9 creditcard: 必须输入合法的信用卡号。

10 equalTo:”#field” 输入值必须和 #field 相同。

11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。

12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。

13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。

14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字

符）。

15 range:[5,10] 输入值必须介于 5 和 10 之间。

16 max:5 输入值不能大于 5。

17 min:10 输入值不能小于 10。

这些属性的使用可以通过添加在标签或者js中来实现，在这之前要使用js让某个表单运用检验规则：

$("#myform").validate();

在标签中使用也有两种方法

（1）

<input type="text" name="name2" class="number required"/>

（2）

<input type="text" name="name1" email="true"

required="true"/>

在js中使用

$('form[name=myform]').validate({
rules:{
name:{
required:true,
minlength:2,
maxlength:10
},
tel:{
required:true,
minlength:7,
maxlength:11,
isMobile:true
},
company:{
required:true,
minlength:2
},
address:{
required:true,
minlength:2
},
city:{
required:true,
},
service:{
required:false
},
num:{
required:true,
number:true,
range:[1,10000]
}
},
messages:{
name:{
required:"最少为2个字！"
},
tel:{
required:"请填写手机号码！",
isMobile:"请填写11位的手机号码!"
},
company:{
required:"公司名称最少为2个字符！"
},
address:{
required:'请填写地址！'
},
city:{
required:"请填写城市！"
},
num:{
required:"请填写正确的拿货量！"
}
},
errorPlacement:function(error,element){
error.appendTo(element.next());
//忽略自定义方法的错误提示
if (error.text() == "ignore") {
return '';
}
},
errorElement:"span",
submitHandler:function(form){

$(form).ajaxSubmit({
url:"php/order.php",
type:"post",
success:function(){
// alert("提交成功！");
$(".shadow").show();
$(".confirm_btn").click(function(){
window.location.href="http://55927461.m.weimob.com/vshop/55927461/Index?PageId=513198&IsPre=1";
})
}
})
}
});

由于默认提示是英文的，所以使用的时候需要引用中文的包：

<script src="messages_zh.js"></script>

或者自己写提示内容。

$.validator.addMethod(name,function(){},”message”)

定义表单只验证不提交：

debug:true;

;

定义表单验证时的错误：

input:error;label:error;

更改错误信息的提示位置：

errorPlacement: function(error, element) {

error.appendTo(element.parent());

}

errorElement:”span”

自定义一些验证方法

1.手机号码的验证

//检测手机号是否正确
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var regPhone = /^1([3578]\d|4[57])\d{8}$/;
return this.optional(element) || ( length == 11 && regPhone.test( value ) );
}, "请正确填写您的手机号码");

2.汉字的验证

//检测用户姓名是否为汉字
jQuery.validator.addMethod("isChar", function(value, element) {
var length = value.length;
var regName = /[^\u4e00-\u9fa5]/g;
return this.optional(element) || !regName.test( value );
}, "请正确格式的姓名(暂支持汉字)");

3.邮编的验证

//检测邮政编码
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

使用的时候js添加新增的属性。

Validate+form.js提交表单数据，在

submitHandler:function(){}方法中使用ajax方法提交数据时，php服务器语言并不能接受数据，可以结合jQuery.form.js来使用

(form).ajaxSubmit()‘,服务器端可以通过‘_GET

或者

$_POST`的方法来接受前端传来的数据。