jquery.vilidate的运用
vilidate是jquery的一个form表单验证插件非常实用
里面需要注意的就是remote的用法
/*验证*/
$().ready(function() {
$(".form_all").validate({
/*经验证，都未出错则执行*/
submitHandler: function(form) {
},
/*提示信息位置为下面的空div*/
errorPlacement: function(error, element) { //错误信息位置设置方法
error.appendTo( element.parent().next() ); //这里的element是录入数据的对象
},
onkeyup: false,
/*验证规则*/
rules:{
/*验证码*/
validata_number:{
required:true,
number:true,
rangelength:[6,6],
remote : {
url :'?c=register&m=verification_judge',
type:'post',
data:{
send_code : function(){
return $("#validata_number").val();
},
send_code_name : function(){
return $('form').find('.input_name').val();
},
}
}
},
/*账户邮箱手机号*/
// uername:{
// required:true,
// uername:true
// },
/*玩家账号*/
Player_account:{
required:true,
remote:{
url :'?c=register&m=name_judge',
type:'post',
data:{
name : function(){
return $("#Player_account").val();
},
player_account:function(){
return $("#Player_account").attr('name');
}
}
}
},
/* /!*真实姓名*!/
real_name:{
required:true
},
/!*身份证号码*!/
ID_number:{
IDnumber:true
},*/
/*手机号码*/
phone_number:{
required:true,
number:true,
rangelength:[11,11],
phonenumber:true,
remote: {
url :'?c=register&m=name_judge',
type:'post',
data:{
name : function(){
return $("#phone_number").val();
}
}
}
},
/*旧密码*/
old_password:{
required:true,
rangelength:[6,15],
remote:{
url:'?c=register&m=name_judge',
type:'post',
data:{
name:function(){
return $("#uername_email_phone").val();
},
old_password:function(){
return $("#old_password").val();
}
}
}
},
/*密码*/
password:{
required:true,
rangelength:[6,15]
},
/*确认密码*/
Confirm_password:{
required:true,
rangelength:[6,15],
equalTo: ".password"
},
/*邮箱*/
email: {
required: true,
email: true,
remote:{
url:'?c=register&m=name_judge',
type:'post',
data:{
name:function(){
return $("#email").val();
}
}
}
},
/*找回密码 邮箱*/
email_back: {
required: true,
email:true,
remote:{
url:'?c=register&m=name_judge',
type:'post',
data:{
name:function(){
return $("#email_back").val();
}
}
}
},
/*找回密码 手机*/
phone_back:{
required:true,
number:true,
rangelength:[11,11],
phonenumber:true,
remote:{
url:'?c=register&m=name_judge',
type:'post',
data:{
name:function(){
return $("#phone_back").val();
}
}
}
},
/*修改密码*/
uername_email_phone:{
required:true,
remote:{
url:'?c=register&m=name_judge',
type:'post',
data:{
name:function(){
return $("#uername_email_phone").val();
}
}
}
}
},
/*验证失败提示*/
messages:{
validata_number:{
required:"请输入右侧验证码",
number:"请输入数字",
rangelength:"请输入六位验证码",
remote:"验证码错误"
},
uername:{
required:"请输入用户名",
uername:"该用户不存在,请重新输入"
},
/*real_name:{
required:"请输入您的真实姓名"
},*/
Player_account:{
required:"请输入您的账号",
remote:"账号输入不对,请重新输入"
},
/* ID_number:{
IDnumber:"请输入正确的身份证号码"
},*/
phone_number:{
required:"请输入手机号码",
number:"请输入正确的手机号码",
rangelength:"请输入十一位手机号码",
phonenumber:"请输入正确的手机号码",
remote:"此号码已被注册"
},
old_password:{
required: "请输入密码",
minlength: "密码长度在6到15之间"
},
password:{
required: "请输入密码",
minlength: "密码长度在6到15之间"
},
Confirm_password:{
required: "请输入密码",
minlength: "密码长度在6到15之间",
equalTo: "两次密码输入不一致"
},
email:{
required: "请输入邮箱",
email:"请输入一个正确的邮箱",
remote:"此邮箱已经被注册"
},
email_back:{
required: "请输入邮箱账号",
email:"请输入一个正确的邮箱",
remote:"用户名错误,请重新输入"
},
phone_back:{
required:"请输入手机号码",
number:"请输入正确的手机号码",
rangelength:"请输入十一位手机号码",
phonenumber:"请输入正确的手机号码",
remote:"用户名错误,请重新输入"
},
uername_email_phone:{
required:"请输入正确的用户名/邮箱/手机号码",
remote:"输入账号不存在,请重新输入"
},
old_password:{
required: "请输入密码",
minlength: "密码长度在6到15之间",
remote:"密码输入错误,请重新输入"
}
},
});
1.需注意用remote的一个容易发生错误的地方 在发送ajax的时候格式为json jquery remote认证的是字符串 需要触发的时候返回echo "false";return false; 无需触发 返回echo "true";return false;
2.使用了remote之后 submitHandler: function(form) { } 与 remote会相触 解决方法
function doSubmit()
{
var result =$("form").valid(); //判断input是否符合要求
if(result == true){
return true;
}else{
return false;
}
}
$('#submit').click(function(){
var url = $('form').attr('action');
if(doSubmit()){
var data= $('form :input').serialize();
$.ajax({
url:url,
type:'post',
data:data,
dataType:'json',
success:function(data) {
if (data)
{
alert('成功');
} else
{
alert('失败');
}
}
});
}
});
在工作中遇到的一些情况,如果有更好的麻烦也告诉我!
