一、将验证写在控件内
<form class="cxform" id="commentForm" method="get" action="">
<fieldset>
<legend>请输入您的名字,邮箱,Url,备注</legend>
</fieldset>
<p>
<label for="cname">Name(必需,最小的两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required/>
</p>
<p>
<label for="cemail">E-Mail(必需)</label>
<input id="cemail" type="email" required />
</p>
<p>
<label for="curl">URL(可选)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">必备(必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</form>
二、将校验规则写到js代码中
$("#AddPlan").validate(
{
rules: {
Title:"required",
Content: "required",
start_date: "required",
responsible:"required"
},
messages: {
Title: "请输入标题",
Content: "请输入内容",
start_date: "请选择完成时间",
responsible:"请选择负责人"
},
showErrors: function (errorMap, errorList) {
var msg = "";
$.each(errorList, function (i, v) {
msg += (v.message + "\r\n");
});
if (msg != "") {
layer.open({
content: msg
, skin: 'msg'
, time: 2 //2秒后自动关闭
})
}
},
onfocusout: false,
onkeyup: false,
})
触发验证并判断
var flag = $("#AddPlan").valid();
if (!flag) {
$("#btn_sub").removeAttr('disabled').val("提交");
return
}
三、添加Class形式的校验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
#frm label.error {
color: Red;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World");
});
jQuery.validator.addMethod("byteMaxLength", function(value,
element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <= param);
}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
jQuery.validator.addMethod("numFormat",function(value,element,param){
return this.optional(element) || /^\d*$/.test(value);
},$.validator.format("请输入数字{0}位以内")
);
//number(9,3)
jQuery.validator.addMethod("numFormat63",function(value,element){
return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
},$.validator.format("请输入合法数字,精度格式123456.0")
);
jQuery.validator.addMethod("postcodeVal",function(value,element){
return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);
},$.validator.format("请输入合法的邮编")
);
jQuery.validator.addMethod("numberAndLettersVal",function(value,element){
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
},$.validator.format("请输入字母或数字")
);
jQuery.validator.addMethod("sfzhValidate",function(value,element){
return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
},$.validator.format("请输入合法身份证号")
);
jQuery.validator.addMethod("valiEnglish",function(value,element){
return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
},$.validator.format("请输入字母或者空格")
);
$("#frm").validate();
$('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true});
$('#postcode').rules('add', { postcodeVal:true});
$('#number').rules('add', { byteMaxLength:5,numFormat:5});
$('#identifier').rules('add', { sfzhValidate:true});
});
</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
<input type="text" name="username" id="username" />
</label>
<p>
<label>邮 编 :<label></label></label>
<label>
<input type="text" name="postcode" id="postcode" />
<br />
</label>
</p>
<p><label>数 字 :
<input type="text" name="number" id="number" />
</label>
<br /><label>身份证号:
<input type="text" name="identifier" id="identifier" />
</label>
<label>
<input type="button" name="clickme" id="clickme" value="click me" />
</label>
</p>
</form>
</body>
</html>
注意:一般将自定义验证放到单独的一个Js里面调用 jQuery.validate.custom.js里面
/*****************************************************************
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之间,只能包含字符、数字和下划线。");
// IP地址验证
jQuery.validator.addMethod("ip", function (value, element) {
return this.optional(element) || /^(([0-9]|([0-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([0-9]|([0-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([0-9]|([0-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);
}, "含有中英文特殊字符");
});