jQuery Validate 插件为表单提供了强大的验证功能
其中
1、替代submit
$("#user_form").validate({
submitHandler:function(form){
alert("这里提交!");
form.submit();
}
});
使用 ajax 方式
$("#user_form").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})
提交表单, 需要使用 form.submit(),而不要使用 $(form).submit()
2、更改错误信息显示的位置
errorPlacement:Callback
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
3、异步验证验证,eg:验证注册手机号是否重复,用户名是否可用?等
remote:URL
使用ajax方式验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项。
remote: "check_phone.php"
remote: {
url: "check_phone.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
user_phone: function() {
return $("#user_phone").val();
}
}
}
远程地址只能输出 "true" 或 "false",不能有其他输出。
4、添加自定义验证,eg,添加正则表达式,
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^13[0-9]{1}[0-9]{8}$|15[012356789]{1}[0-9]{8}$|14[57]{1}[0-9]{8}$|17[678]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
5、来个完整的例子
$('#user_form').validate({
submitHandler:function(form){
ajaxpost('user_form', '', '', 'onerror');
},
rules : {
password: {
maxlength: 20,
minlength: 6
},
mobile : {
required : true,
isMobile : true,
remote : {
url :'<?php echo urlLifeShop('employee_mgr','ajax',array('branch'=>'check_phone'));?>',
type:'get',
data:{
phone : function(){
return $('#mobile').val();
}
}
}
}
},
messages : {
password : {
maxlength: '<i class="fa fa-exclamation-circle"></i><?php echo '检查密码长度';?>',
minlength: '<i class="fa fa-exclamation-circle"></i><?php echo '检查密码长度';?>'
},
mobile : {
required : '<i class="fa fa-exclamation-circle"></i><?php echo '请填写手机号';?>',
isMobile : '<i class="fa fa-exclamation-circle"></i><?php echo '手机号格式错误';?>',
remote : '<i class="fa fa-exclamation-circle"></i><?php echo '该手机号已经被注册!';?>'
}
}
});
原创文章,转载请注明: 转载自HSBLOG
本文链接地址: jQuery Validate插件使用