步骤1:导入封装后自定义验证方法-validate-methods.js
$(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; } }); 步骤2:创建jsp页面,并导入封装js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>jQuery Validate扩展验证方法</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/validate-methods.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script> <script type="text/javascript"> $(function(){ var validate = $("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form alert("提交表单"); form.submit(); //提交表单 }, rules:{ zero:{ //isIntEqZero:true //isFloat:true //isInteger:true //isNumber:true //isMobile:true //isPhone:true //isTel:true //isIdCardNo:true //isRightfulString:true isContainsSpecialChar:true } }, //如果验证控件没有message,将调用默认的信息 messages:{ zero:{ //isIntEqZero:"请输入0" //isFloat:"请输入浮点数" //isInteger:"请输入整数" } } }); }); </script> </head> <body> <form id="myform" method="post" action=""> <p> <label for="zero">输入框:</label> <!-- id和name最好同时写上 --> <input id="zero" name="zero" /> </p> <p> <input class="submit" type="submit" value="验证" /> </p> </form> </body> </html>
相关推荐
基于Bootstrap与jQuery-validate的个人封装检验框架demo,拥有良好的UI与用户体验.博客地址:http://blog.csdn.net/u010506919/article/details/75137353
这是我根据自己项目需求封装的jquery验证的JS包,希望对大家有帮助
基于Bootstrap与jQuery-validate的个人封装检验框架demo,拥有良好的UI与用户体验
为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈。 二、validate插件简介 validate()是插件的核心方法,定义了基本的校验规则和...
该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。
增加中文包,同时对remote方法进行封装增强
封装了 jquery校验需要的源码 与使用文档 不要怕你是菜鸟 很快就可运用
鼠标划过主菜单,二级菜单就会出现,划过速度如果过快的话,会出现多组菜单共同渐隐的效果,看上去挺漂亮,应用了超多的jQuery组件库,像jquery.easing.js、jquery.scrollTo.js、jquery.validate.js、jquery.color....
jquery validate表单验证插件制作用户注册页面表单提交验证,用户名、手机、密码、邮箱等表单验证。通过这款validate表单验证插件能制作多种表单提交验证。
为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈。
jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...
可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...
6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip...
1)自己封装一个JS,叫做checkInput.js 里面有一个方法,方法叫做validate 这个方法可以实现根据input标签的validate属性进行验证。 maxlength minlength required true/false isDate true/false ...
鼠标划过主菜单,二级菜单就会出现,划过速度如果过快的话,会出现多组菜单共同渐隐的效果,看上去挺漂亮,应用了超多的jQuery组件库,像jquery.easing.js、jquery.scrollTo.js、jquery.validate.js、jquery.color....
表单验证使用jQuery validate插件等等。 5、系统部署: 1)使用mysql数据库,先建立一个空数据库base,最好编码使用utf-8或者utf-8mb4字符集,不然会乱码。 2)把application.properties中的数据库连接信息修改成...
内容索引:脚本资源,jQuery,导航菜单,jQuery菜单 jQuery 竖向带渐隐效果的两级...像jquery.easing.js、jquery.scrollTo.js、jquery.validate.js、jquery.color.js等,还用到了一个自定义的封装库,值得大家去研究一番。
表单验证使用jQuery validate插件等等。 5、系统部署: 1)使用mysql数据库,先建立一个空数据库base,最好编码使用utf-8字符集,不然会乱码。 2)把application.properties中的数据库连接信息修改成自己数据库的...
表单验证使用jQuery validate插件等等。 系统部署: 方式一: 使用mysql数据库,先建立一个空数据库base,最好编码使用utf-8字符集,不然会乱码。 把application.properties中的数据库连接信息修改成自己数据库的...
1、使用springboot、springdata jpa、shiro等服务端技术,使用freemarker模版渲染页面;数据源使用Druid; 2、系统中对springdata的查询条件Specification做了简单的封装,...表单验证使用jQuery validate插件等等。