jQuery Validate使用记录

转载：http://www.runoob.com/jquery/jquery-plugin-validate.html

官网 https://jqueryvalidation.org/

导入JS包：

<script type="text/javascript" src="${resourceUrl}/common/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${resourceUrl}/common/jquery/jquery.validate.min.js"></script>

使用方式

1、将校验规则写到控件中

2、将校验规则写到 js 代码中

例子：

var validate = $("#createAccountForm").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
accountFormSubmit();
},
rules:{
"name":{
required:true
},
"supplierId":{
required:true,
remote:{
url: ctx + "/seller/validateSupplierId.s",
data:{
"supplierId":function(){return $("#supplierId").val();}
}
}
},
"sellerExt.telephone":{
required:true,
isMobile:true,
remote:{
url: ctx + "/seller/validateUserName.s",
data:{
"userName":function(){return $("#telephone").val();}
}
}
},
"sellerExt.linkman":{
required:true
},
"crea_project_checkbox":{
required:true,
minlength:1
},
"password":{
required:true
},
"confirm_password":{
required:true,
equalTo:"#password"
}
},
messages:{
"name":{
required:"必填"
},
"supplierId":{
required:"必填",
remote: jQuery.validator.format("经销商Id已被占用")
},
"sellerExt.telephone":{
required:"必填",
isMobile:"手机号格式错误",
remote: jQuery.validator.format("手机号(用户名)已被占用")
},
"sellerExt.linkman":{
required:"必填"
},
"crea_project_checkbox":{
required:"请选至少一个合作项目",
minlength:"必填"
},
"password":{
required: "不能为空"
},
"confirm_password":{
required: "不能为空",
equalTo:"两次密码输入不一致"
}
},
errorPlacement: function(error, element) { //更改错误信息显示的位置

if (element.attr("name")=="crea_project_checkbox"){
error.appendTo(element.parent().parent());
}else{
error.appendTo(element.parent());
}
},
success: function(label) {//验证通过后的操作
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
if ($(element).attr("name")=="crea_project_checkbox"){
$(element).parent().parent().find("." + errorClass).removeClass("checked");
}else{
$(element).parent().find("." + errorClass).removeClass("checked");
}
}

});

JSP 中Form例子：

<form id="createAccountForm" action="" method="post" autocomplete="off"><!-- /seller/save -->
<div class="crea_account">
<ul>
<li>
<span class="color_red mrl_21">*</span>
<span>经销商ID： </span>
<input type="text" value="" name="supplierId" id="supplierId" class="crea_seller_name" />
</li>
<li>
<span class="color_red mrl_21">*</span>
<span>卖家名称： </span>
<input type="text" value="" name="name" id="name" class="crea_seller_name" />
</li>
<li>
<span class="color_red mrl_33">*</span>
<span>手机号：</span>
<input type="text" value="" name="sellerExt.telephone" id="telephone" class="crea_mobile_num" />
</li>
<li>
<span class="color_red mrl_33">*</span>
<span>联系人：</span>
<input type="text" value="" name="sellerExt.linkman" id="linkman" class="crea_connect_person" />
</li>
<li>
<span class="mrl_30">所在区域：</span>
<div class="info">
<input type="hidden" id="s_province" value="-1"/>
<input type="hidden"  id="s_city" value="-1"/>
<input type="hidden"  id="s_county" value="-1"/>
<div>
<select id="s_province_select" name="s_province">
<option value="-1">省份</option>
</select>  
<select id="s_city_select" name="s_city" >
<option value="-1">城市</option>
</select>  
<select id="s_county_select" name="s_county">
<option value="-1">区域</option>
</select>
</div>
<div id="show"></div>
</div>
</li>
<li>
<span class="mrl_30">具体地址：</span>
<input type="text" value="" name="sellerExt.address" id="address" class="crea_address"  />
</li>
<li>
<span class="color_red mrl_21">*</span>
<span>合作项目：</span>
<span class="mrr_30"><input type="checkbox" name="crea_project_checkbox" class="crea_project_checkbox" value="1"/>电瓶&服务</span>
<span><input type="checkbox" name="crea_project_checkbox" class="crea_project_checkbox" value="2"/>纯商品销售</span>  
</li>
<li>
<span class="color_red mrl_45">*</span>
<span>密码：</span>
<input type="text" value="" name="password" id="password" class="crea_password" />
</li>
<li>
<span class="color_red mrl_21">*</span>
<span>确认密码：</span>
<input type="text" value="" name="confirm_password" id="confirm_password" class="crea_password" />
</li>
</ul>
<button class="btn btn-default crea_btn_sure " type="submit">确定</button>
<button class="btn btn-default crea_btn_reset" type="reset">重置</button>
</div>
</form>

注：

1）更改错误信息显示的位置

errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

2）更改错误信息显示的样式

input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

3）要验证的元素通过验证后的动作

success: function(label) {
// set   as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}

4）添加自定义校验

// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

建议一般写在
additional-methods.js 文件中。调用前要添加对 additional-methods.js 文件的引用。

5）radio
和 checkbox、select 的验证

radio 的 required 表示必须选中一个。

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必须选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示选中的 value 不能为空。

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>

select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>

常用自定义验证

转自:/article/4621306.html

/*******************************************************************************
* 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 {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;
}

});

// 车牌号校验
function isPlateNo(plateNo){
var re = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/;
if(re.test(plateNo)){
return true;
}
return false;
}