导入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 IElabel.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>

常用自定义验证

转自:http://www.cnblogs.com/linjiqin/p/3433635.html

/******************************************************************************** jQuery Validate扩展验证方法 ******************************************************************************/
$(function(){// 判断整数value是否等于0jQuery.validator.addMethod("isIntEqZero", function(value, element) { value=parseInt(value);      return this.optional(element) || value==0;       }, "整数必须为0"); // 判断整数value是否大于0jQuery.validator.addMethod("isIntGtZero", function(value, element) { value=parseInt(value);      return this.optional(element) || value>0;       }, "整数必须大于0"); // 判断整数value是否大于或等于0jQuery.validator.addMethod("isIntGteZero", function(value, element) { value=parseInt(value);      return this.optional(element) || value>=0;       }, "整数必须大于或等于0");   // 判断整数value是否不等于0jQuery.validator.addMethod("isIntNEqZero", function(value, element) { value=parseInt(value);      return this.optional(element) || value!=0;       }, "整数必须不等于0");  // 判断整数value是否小于0jQuery.validator.addMethod("isIntLtZero", function(value, element) { value=parseInt(value);      return this.optional(element) || value<0;       }, "整数必须小于0");  // 判断整数value是否小于或等于0jQuery.validator.addMethod("isIntLteZero", function(value, element) { value=parseInt(value);      return this.optional(element) || value<=0;       }, "整数必须小于或等于0");  // 判断浮点数value是否等于0jQuery.validator.addMethod("isFloatEqZero", function(value, element) { value=parseFloat(value);      return this.optional(element) || value==0;       }, "浮点数必须为0"); // 判断浮点数value是否大于0jQuery.validator.addMethod("isFloatGtZero", function(value, element) { value=parseFloat(value);      return this.optional(element) || value>0;       }, "浮点数必须大于0"); // 判断浮点数value是否大于或等于0jQuery.validator.addMethod("isFloatGteZero", function(value, element) { value=parseFloat(value);      return this.optional(element) || value>=0;       }, "浮点数必须大于或等于0");   // 判断浮点数value是否不等于0jQuery.validator.addMethod("isFloatNEqZero", function(value, element) { value=parseFloat(value);      return this.optional(element) || value!=0;       }, "浮点数必须不等于0");  // 判断浮点数value是否小于0jQuery.validator.addMethod("isFloatLtZero", function(value, element) { value=parseFloat(value);      return this.optional(element) || value<0;       }, "浮点数必须小于0");  // 判断浮点数value是否小于或等于0jQuery.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);       }, "只能包含数字、小数点等字符"); // 匹配integerjQuery.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));   }, "请正确填写您的联系方式"); // 匹配qqjQuery.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);       }, "只能包含中文、英文、数字、下划线等字符");   // 匹配englishjQuery.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;
}

jQuery Validate使用记录相关推荐

jQuery Validate验证使用记录
官网:https://jqueryvalidation.org 特别说明:前端验证只适用于一般用户,后端必须再次验证 0.演示 1.导入js <script src="https:// ...
jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
jQuery.Validate 验证,以及 remote验证, 多参数传递
jQuery.Validate 验证: http://www.runoob.com/jquery/jquery-plugin-validate.html 教程网址,很简单, 今天主要在这里记录一下re ...
（转）jquery.validate插件的使用
JQuery Validate使用总结: 一.导入js库 <script src="../js/jquery.js" type="text/javascript&q ...
jquery validate使用
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bass ...
jquery validate 详解一
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...
jQuery校验 jQuery Validate 表单验证详解
官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../j ...
jQuery Validate
2019独角兽企业重金招聘Python工程师标准>>> 贴上链接 http://www.runoob.com/jquery/jquery-plugin-validate.html & ...
jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){if($("#form").valid()){$(& ...
jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明转载 ...

jQuery Validate使用记录