一、引用文件:
<script type="text/javascript" src="<%=path%>/js/jquery-validate/jquery.validate.min.js"></script>
二、使用方式
js代码:
$(function(){
//给form引用表单验证插件
$("#form_user_add").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为:error
focusInvalid: false, //当为false时,验证无效时,没有焦点响应
onkeyup: false,
ignore: ".ignore",
rules: {
userName: {
required: true,
minlength: 5
}
},
messages: {
userName: {
required: "请输入用户名!",
minlength: "用户名长度至少为5个字符!"
}
},
//配置错误信息显示的位置
errorPlacement : function(error, element) {
error.appendTo(element.next());
},
success: function(label) {
//表单验证成功之后自动执行的方法
},
submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
$.ajax({
cache: true,
type: "post",
url:"userManage/addUser.do",
data:$(form).serialize(),// 你的form对象
async: false,
success: function(data) {
window.parent.art.dialog.alertSuccess(data.msg);
//刷新页面
var iframeId = "${menuIframeId}";
window.parent.$("#"+iframeId)[0].contentWindow.$("#user_list_submit").click();
//关闭窗口
window.parent.art.dialog.list["user_add_window"].close();
},
error: function(request) {
window.parent.art.dialog.alertError("很抱歉!服务器发生异常,提交失败");
}
});
}
});
})
三、验证属性
默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(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
四、动态添加、删除验证
(1)动态添加
$("#gradeSel").rules("add", {
selected : true,
messages : {
selected : "年级必须选择."
}
});
$("#classSel").rules("add", {
selected : true,
messages : {
selected : "班级必须选择."
}
});
(2)动态删除
$("#gradeSel").rules("remove");
$("#classSel").rules("remove");
五、自定义验证
/*****************************************************************
jQuery Validate扩展验证方法 (张奇峰)
*****************************************************************/
$(function(){
// 判断整数value是否等于0
jQuery.validator.addMethod("isIntEqZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value==0;
}, "整数必须为0");
// 判断整数value是否大于0
jQuery.validator.addMethod("isIntGtZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value>0;
}, "整数必须大于0");
// 判断整数value是否大于或等于0
jQuery.validator.addMethod("isIntGteZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value>=0;
}, "整数必须大于或等于0");
// 判断整数value是否不等于0
jQuery.validator.addMethod("isIntNEqZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value!=0;
}, "整数必须不等于0");
// 判断整数value是否小于0
jQuery.validator.addMethod("isIntLtZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value<0;
}, "整数必须小于0");
// 判断整数value是否小于或等于0
jQuery.validator.addMethod("isIntLteZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value<=0;
}, "整数必须小于或等于0");
// 判断浮点数value是否等于0
jQuery.validator.addMethod("isFloatEqZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value==0;
}, "浮点数必须为0");
// 判断浮点数value是否大于0
jQuery.validator.addMethod("isFloatGtZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value>0;
}, "浮点数必须大于0");
// 判断浮点数value是否大于或等于0
jQuery.validator.addMethod("isFloatGteZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value>=0;
}, "浮点数必须大于或等于0");
// 判断浮点数value是否不等于0
jQuery.validator.addMethod("isFloatNEqZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value!=0;
}, "浮点数必须不等于0");
// 判断浮点数value是否小于0
jQuery.validator.addMethod("isFloatLtZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value<0;
}, "浮点数必须小于0");
// 判断浮点数value是否小于或等于0
jQuery.validator.addMethod("isFloatLteZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value<=0;
}, "浮点数必须小于或等于0");
// 判断浮点型
jQuery.validator.addMethod("isFloat", function(value, element) {
return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "只能包含数字、小数点等字符");
// 匹配integer
jQuery.validator.addMethod("isInteger", function(value, element) {
return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value)>=0);
}, "匹配integer");
// 判断数值类型,包括整数和浮点数
jQuery.validator.addMethod("isNumber", function(value, element) {
return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "匹配数值类型,包括整数和浮点数");
// 只能输入[0-9]数字
jQuery.validator.addMethod("isDigits", function(value, element) {
return this.optional(element) || /^\d+$/.test(value);
}, "只能输入0-9数字");
// 判断中文字符
jQuery.validator.addMethod("isChinese", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "只能包含中文字符。");
// 判断英文字符
jQuery.validator.addMethod("isEnglish", function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "只能包含英文字符。");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码。");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isTel", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || tel.test(value) || (length==11 && mobile.test(value));
}, "请正确填写您的联系方式");
// 匹配qq
jQuery.validator.addMethod("isQq", function(value, element) {
return this.optional(element) || /^[1-9]\d{4,12}$/;
}, "匹配QQ");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码。");
// 匹配密码,以字母开头,长度在6-12之间,只能包含字符、数字和下划线。
jQuery.validator.addMethod("isPwd", function(value, element) {
return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value);
}, "以字母开头,长度在6-12之间,只能包含字符、数字和下划线。");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
//var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;
return this.optional(element) || isIdCardNo(value);
}, "请输入正确的身份证号码。");
// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);
}, "请填写正确的IP地址。");
// 字符验证,只能包含中文、英文、数字、下划线等字符。
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);
}, "只能包含中文、英文、数字、下划线等字符");
// 匹配english
jQuery.validator.addMethod("isEnglish", function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "匹配english");
// 匹配汉字
jQuery.validator.addMethod("isChinese", function(value, element) {
return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
}, "匹配汉字");
// 匹配中文(包括汉字和字符)
jQuery.validator.addMethod("isChineseChar", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "匹配中文(包括汉字和字符) ");
// 判断是否为合法字符(a-zA-Z0-9-_)
jQuery.validator.addMethod("isRightfulString", function(value, element) {
return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);
}, "判断是否为合法字符(a-zA-Z0-9-_)");
// 判断是否包含中英文特殊字符,除英文"-_"字符外
jQuery.validator.addMethod("isContainsSpecialChar", function(value, element) {
var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\!)(\@)(\#)(\¥)(\%)(\…)(\&)(\*)(\()(\))(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\;)(\:)(\”)(\“)(\’)(\。)(\,)(\、)(\?)]+/);
return this.optional(element) || !reg.test(value);
}, "含有中英文特殊字符");
//身份证号码的验证规则
function isIdCardNo(num){
//if (isNaN(num)) {alert("输入的不是数字!"); return false;}
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/);
else if (len == 18)
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/);
else {
//alert("输入的数字位数不对。");
return false;
}
var a = num.match(re);
if (a != null)
{
if (len==15)
{
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else
{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B) {
//alert("输入的身份证号 "+ a[0] +" 里出生日期不对。");
return false;
}
}
if(!re.test(num)){
//alert("身份证最后一位只能是数字和字母。");
return false;
}
return true;
}
});