jQuery Validate.js 远程校验remote、动态添加验证规则、删除验证规则
1、远程校验的方法
注意，传递值的写法
data:{
"telephone":function(){
return $('#phone').val();
},
"verificationCode":function(){
return $('#code').val();
}
}, 返回值
if(obj.data == 1){
return true;
}else{
return false;
} remote:{
type:"post",//数据请求方式
url: "../register/findTelephone",//异步验证路径
data:{
"telephone":function(){
return $('#phone').val();
},
"verificationCode":function(){
return $('#code').val();
}
},
dataType:"html",
dataFilter:function(data,type){//AJAX异步返回数据
var obj = eval("("+data+")");//返回成功 data.data=1
if(obj.data == 1){
return true;
}else{
return false;
}
}
} 2、动态添加验证
为手机号添加验证，然后从新启动验证
$('#phone').rules("add",{
isPhone:true
});
$("#phone").valid(); //添加完验证后启动验证3、删除校验的方法
本实例中没有用到
$('#phone').rules("remove","isPhone");以下为注册实例
$(function(){
var isPhone=true;
var phoneHint="";
$("#myform").validate({
submitHandler: function(form) {
//验证通过调用此方法
alert(1);
} ,
rules: {
"telephone": {
required: true,
isMobile: true,
},
"verificationCode": {
required: true,
isCode: true,
remote:{
type:"post",//数据请求方式
url: "../register/findTelephone",//异步验证路径
data:{
"telephone":function(){
return $('#phone').val();
},
"verificationCode":function(){
return $('#code').val();
}
},
dataType:"html",
dataFilter:function(data,type){//AJAX异步返回数据
var obj = eval("("+data+")");
console.log(obj);
if(obj.data == 1){
return true;
}else{
return false;
}
}
}
},
"email": {
required: true,
isEmail: true,
remote:{
type:"post",//数据请求方式
url: "../register/findEmail",//异步验证路径
data:{
"email":function(){
return $('#email').val();
}
},
dataType:"html",
dataFilter:function(data,type){//AJAX异步返回数据
var obj = eval("("+data+")");
//console.log(obj);
if(obj.data == 1){
return true;
}else{
return false;
}
}
}
},
"pwd": {
required: true,
rangelength: [8, 32],
isPwd:true
}
},
//设置错误信息
messages: {
"telephone": {
required: "请输入手机号",
isMobile: "手机号格式错误",
isPhone: "手机号已存在"
},
"verificationCode": {
required: "请输入验证码",
isCode:"验证码格式错误",
checkCode:"验证码不正确",
remote:"验证码错误"
},
"email": {
required: "请输入邮箱",
isEmail:"邮箱格式错误",
remote:"邮箱已存在"
},
"pwd": {
required: "请输入密码",
rangelength: "8-24位，必须包含字母和数字"
}
},
//修改错误信息的位置
errorPlacement: function(error, element){
error.appendTo(element.parents("li"));
},
//修改错误信息的标签
errorElement: "span",
//修改正确信息
/*success: function(element) {
//正确时的样式
element.text("正确").addClass("success");
},*/
});
/*获取验证码*/
$(".one .min-btn").click(function(){
var bel=$('#phone').valid() ? "true" : "false"; //验证手机号是否通过验证
if(bel){
$(".one .min-btn").attr("disabled",false);
$.ajax({
type: "post",
url: "../register/getVerificationCode",
data:{"telephone":$('#phone').val()},
datatype: "json",
success: function(data){
//console.log(data);
if(data.data==1){
new invokeSettime(".one .min-btn");
isPhone=true
}else if(data.data==101){
isPhone=false
$('#phone').rules("add",{
isPhone:true
});
phoneHint=data.message;
$("#phone").valid();
}else if(data.data==201){
isPhone=false
$('#phone').rules("add",{ //返回失败动态添加手机号验证
isPhone:true
});
phoneHint=data.message;
$("#phone").valid(); //添加完验证后启动验证
}
},
error:function(data){
console.log(data);
}
});
}
});
//异步验证手机号码
jQuery.validator.addMethod("isPhone", function(value, element){
return isPhone;
}, "手机号码已经存在");
});
/*
*自定义验证
*/
//手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|4|5|7|8][0-9]{9}))$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号格式不正确");
//手机号码验证码
jQuery.validator.addMethod("isCode", function(value, element) {
var length = $.trim(value.length);
var code = /^([0-9]{6})$/;
return this.optional(element) || (length == 6 && code.test(value));
}, "请输入6位手机验证码");
//手机号码验证码
jQuery.validator.addMethod("isEmail", function(value, element) {
var length = $.trim(value.length);
var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return this.optional(element) || (email.test(value));
}, "邮箱格式不正确");
//密码格式验证
jQuery.validator.addMethod("isPwd", function(value, element) {
var length = $.trim(value.length);
var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,32}$/;
return this.optional(element) || (length >= 8 && length<= 32 && pwd.test(value));
}, "8-24位，必须包含字母和数字");