前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery_validation插件辅助资料

jquery_validation插件辅助资料

作者头像
DencyCheng
发布2018-11-05 16:07:49
1.1K0
发布2018-11-05 16:07:49
举报
文章被收录于专栏:SpringBoot

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery Validate 客户端验证插件辅助资料 【】jQuery Validate网址 http://jqueryvalidation.org/ 【】jQuery validation引入 先引入jQuery,再引入jquery validation插件,以及支持I18N的插件文件 <script type="text/javascript" src="../jqueryvalidate/jquery.validate.min.js"></script> <script type="text/javascript" src="../jqueryvalidate/localization/messages_zh.min.js"></script> 【】jQuery validation插件的使用 1.定义表单 可以使用HTML form表单元素,也可以使用Struts2表单元素 <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s" %> <s:form id="departmentaddform" action="../department/add.action" method="post"> <s:textfield id="departmentcode" name="dv.code" label="部门编码"></s:textfield> <s:textfield id="departmentname" name="dv.name" label="部门名称"></s:textfield> <s:submit value="提交"></s:submit> </s:form> 2.JavaScript引入jQuery validation  //部门表单验证  $("form#departmentaddform").validate({ rules: {        "dv.code": {            required: true,            rangelength: [5,10]        },        "dv.name":{ required: true        } }  }); 【】jQuery validation常用的验证规则 默认校验规则   (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  【】验证规则的使用 $().ready(function() {   $("#signupForm").validate({           rules: {   firstname: "required",   email: {      required: true,      email: true   },   password: {      required: true,      minlength: 5   },   confirm_password: {      required: true,      minlength: 5,      equalTo: "#password"   }      },           messages: {      firstname: "请输入姓名",      email: {       required: "请输入Email地址",       email: "请输入正确的email地址"      },      password: {       required: "请输入密码",       minlength: jQuery.format("密码不能小于{0}个字符")      },      confirm_password: {       required: "请输入确认密码",       minlength: "确认密码不能小于5个字符",       equalTo: "两次输入密码不一致不一致"      }   }       });   });   【】常用验证规则的使用 1.required 必填 $( "#myform" ).validate({   rules: {     username: {       required: true     }   } }); 2. remote 远程验证 $( "#myform" ).validate({   rules: {     email: {       required: true,       email: true,       remote: "check-email.php"     }   } }); 3.minlength  field: {       required: true,       minlength: 3     } 4.maxlength field: {       required: true,       maxlength: 4     } 5.rangelength  field: {       required: true,       rangelength: [2, 6]     } 7.min,max, range  field: {       required: true,       min: 13,       max:20,       range:[10,20]     } 8.date 必须是date类型 field: {       required: true,       date: true     } 9.number 输入必须是数值  field: {       required: true,       number: true     } 10.equalTo 与另一个元素相等 rules: {     password: "required",     password_again: {       equalTo: "#password"     }   } 在使用 equalTo 关键字时,后面的内容必须加上引号,代码如下所示: equalTo:'#password' 11. accept 文件域文件接收限制验证,Makes a file upload accept only specified mime-types. 指定MIME类型,如image/*,  多个限制,使用逗号间隔。 $( "#myform" ).validate({   rules: {     field: {       required: true,       accept: "audio/*,image/jpeg"     }   } }); 【】通过AJAX调用远程URL进行验证 $( "#myform" ).validate({   rules: {     email: {       required: true,       email: true,       remote: "check-email.php"     }   } }); 通过remote:"url",   //调用url指定的服务器端请求地址进行验证 remote:URL   使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项   remote: "check-email.php"   remote: {       url: "check-email.php",     //后台处理程序       type: "post",               //数据发送方式       dataType: "json",           //接受数据格式          data: {                     //要传递的数据           username: function() {               return $("#username").val();           }       }   }   远程地址只能输出 "true" 或 "false",不能有其它输出   【】jQuery validation自定义验证规则 addMethod:name, method, message   自定义验证方法   // 中文字两个字节   jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1] );      }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));   // 邮政编码验证      jQuery.validator.addMethod("isZipCode", function(value, element) {          var tel = /^[0-9]{6}$/;       return this.optional(element) || (tel.test(value));   }, "请正确填写您的邮政编码");   //jQuery.validate的optional(element),用于表单控件的值不为空时才触发验证 此时定义的byteRangeLength,isZipCode规则可以像内置规则一样使用。 postcode:{     isZipCode:true }, // jQuery.validator.addMethod("laxEmail", function(value, element) {   // allow any non-whitespace characters as the host part   return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value ); }, 'Please enter a valid email address.'); 【】常用的自定义验证案例: 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("请输入字母或者空格")   );   【】验证的提示: 默认提示 messages: {   required: "This field is required.",   remote: "Please fix this field.",   email: "Please enter a valid email address.",   url: "Please enter a valid URL.",   date: "Please enter a valid date.",   dateISO: "Please enter a valid date (ISO).",   dateDE: "Bitte geben Sie ein gültiges Datum ein.",   number: "Please enter a valid number.",   numberDE: "Bitte geben Sie eine Nummer ein.",   digits: "Please enter only digits",   creditcard: "Please enter a valid credit card number.",   equalTo: "Please enter the same value again.",   accept: "Please enter a value with a valid extension.",   maxlength: $.validator.format("Please enter no more than {0} characters."),   minlength: $.validator.format("Please enter at least {0} characters."),   rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),   range: $.validator.format("Please enter a value between {0} and {1}."),   max: $.validator.format("Please enter a value less than or equal to {0}."),   min: $.validator.format("Please enter a value greater than or equal to {0}.") }, 如果要修改默认的验证消息,使用如下方法: jQuery.extend(jQuery.validator.messages, {   required: "必选字段",   remote: "请修正该字段",   email: "请输入正确格式的电子邮件",   url: "请输入合法的网址",   date: "请输入合法的日期",   dateISO: "请输入合法的日期 (ISO).",   number: "请输入合法的数字",   digits: "只能输入整数",   creditcard: "请输入合法的信用卡号",   equalTo: "请再次输入相同的值",   accept: "请输入拥有合法后缀名的字符串",   maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),   minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),   rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),   range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),   max: jQuery.validator.format("请输入一个最大为{0} 的值"),   min: jQuery.validator.format("请输入一个最小为{0} 的值") }); 【】验证规则中直接写验证消息文本 $().ready(function() {  $("#signupForm").validate({         rules: {    firstname: "required",    email: {     required: true,     email: true    },    password: {     required: true,     minlength: 5    },    confirm_password: {     required: true,     minlength: 5,     equalTo: "#password"    }   },         messages: {    firstname: "请输入姓名",    email: {     required: "请输入Email地址",     email: "请输入正确的email地址"    },    password: {     required: "请输入密码",     minlength: jQuery.format("密码不能小于{0}个字 符")    },    confirm_password: {     required: "请输入确认密码",     minlength: "确认密码不能小于5个字符",     equalTo: "两次输入密码不一致不一致"    }   }     }); });

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年02月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档