本文实例为大家分享了jquery表单验证插件，供大家参考，具体内容如下
//正则表达式 var map = new Map(); map.put("*", /[wW]+/); map.put("*6-16", /^[wW]{6,16}$/); map.put("n", /^d+$/); map.put("n6-16", /^d{6,16}$/); map.put("s", /^[u4E00-u9FA5uf900-ufa2dw.s]+$/); map.put("s6-16", /^[u4E00-u9FA5uf900-ufa2dw.s]{6,16}$/); map.put("p", /^[0-9]{6}$/);//邮编 map.put("m", /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/);//手机号码 map.put("e", /^w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*$/);//email map.put("url", /^(http|https)://(w+://)?w+(.w+)+.*$/);//url地址 map.put("image", /^(http|https)://.*(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$/);//图片 map.put("integer", /^[1-9]d*$/);//大于0的正整数 map.put("hj", /(S*?) [^>]*>.*?</1>|<.*?/);//过滤html标签和javascript标签 (function($,win){ Validform = { matchReg : function(datatype){ //匹配返回正则表达式 有3个比较特殊 所有特殊处理一下 //这3个是因为有长度判断 要动态修改正则表达式 var reg1 = /^*d{1,}-d{1,}$/; var reg2 = /^nd{1,}-d{1,}$/; var reg3 = /^sd{1,}-d{1,}$/; if(reg1.test(datatype) || reg2.test(datatype) || reg3.test(datatype)){ //把开始长度和结束长度截取出来 var index = datatype.indexOf("-"); var nums =new Array(); nums[0] = datatype.substring(1,index); nums[1] = datatype.substring(index+1,datatype.length); //替换数字 var reg; switch (datatype.substring(0,1)) { ///^[wW]{6,16}$/ case "*": reg = new RegExp("^[wW]{"+nums[0]+","+nums[1]+"}$"); break; case "n": reg = new RegExp("^d{"+nums[0]+","+nums[1]+"}$"); break; case "s": reg = new RegExp("^[u4E00-u9FA5uf900-ufa2dw.s/]{"+nums[0]+","+nums[1]+"}$"); break; } return reg; }else{ return map.get(datatype); } } } })(jQuery,window); HaHaUtil = { checkFrom : function(formId){ var form = $("#"+formId)[0]; //遍历表单下面的元素 for(var i=0;i<form.length;i++){ if(!HaHaUtil.resultCheck(form[i])){ return false; } } return true; }, resultCheck : function(obj){ var tagName = obj.tagName; switch(tagName) { case "INPUT": case "TEXTAREA": $item = $(obj); var dataType = $item.attr("dataType"); //没有验证标签 就不校验了 if(dataType == null){ return true; }else{ //获取 dataType 可以有多个验证用|分割开 var reType = dataType.split("|"); //把表单值前后的空格去掉 var f_value = $item.val(); if(f_value.indexOf(" ")!=-1){ //说明有空格 也有可能中间有空格 中间有空格就不会去掉 $item.val($.trim(f_value)); } var tipId = $item.attr("tipId"); $("#"+tipId).html(""); for(var i=0;i<reType.length;i++){ //如果第一个正则是 empty 说明是可以没值 //如果有值 在根据正则校验 if(reType[i] == "empty"){ if($item.val() == ""){ //就不校验了 return true; break; }else{ //继续校验 continue; } } if($("."+tipId).is(":hidden")){ //如果是隐藏的菜单不校验 continue; } //获取返回的正则表达式 var reg = Validform.matchReg(reType[i]); if(!reg.test($item.val())){ //判断不通过 $("#"+tipId).html($item.attr("errormsg")); return false; break; }else{ //判断通过 继续校验 continue; } } return true; } break; //没有匹配到标签就返回false default : return true; } } } Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } function Map() { /** 存放键的数组(遍历用到) */ this.keys = new Array(); /** 存放数据 */ this.data = new Object(); /** * 放入一个键值对 * @param {String} key * @param {Object} value */ this.put = function(key, value) { if(this.data[key] == null){ this.keys.push(key); } this.data[key] = value; }; /** * 获取某键对应的值 * @param {String} key * @return {Object} value */ this.get = function(key) { return this.data[key]; }; /** * 删除一个键值对 * @param {String} key */ this.remove = function(key) { this.keys.remove(key); this.data[key] = null; }; /** * 遍历Map,执行处理函数 * * @param {Function} 回调函数 function(key,value,index){..} */ this.each = function(fn){ if(typeof fn != 'function'){ return; } var len = this.keys.length; for(var i=0;i<len;i++){ var k = this.keys[i]; fn(k,this.data[k],i); } }; /** * 获取键值数组(类似Java的entrySet()) * @return 键值对象{key,value}的数组 */ this.entrys = function() { var len = this.keys.length; var entrys = new Array(len); for (var i = 0; i < len; i++) { entrys[i] = { key : this.keys[i], value : this.data[i] }; } return entrys; }; /** * 判断Map是否为空 */ this.isEmpty = function() { return this.keys.length == 0; }; /** * 获取键值对数量 */ this.size = function(){ return this.keys.length; }; /** * 重写toString */ this.toString = function(){ var s = "{"; for(var i=0;i<this.keys.length;i++,s+=','){ var k = this.keys[i]; s += k+"="+this.data[k]; } s+="}"; return s; }; }
这个是一个js插件保存.js引用就可以了，特点灵活可以自定义校验内容原理使用正则表达式，对于隐藏的表单不校验
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <%@ include file="/common/taglibs.jsp"%> <%@page contentType="text/html;charset=UTF-8"%> <%@page pageEncoding="UTF-8"%> <html> <head> <title>新建商品</title> <script type="text/javascript" src="<%=request.getContextPath()%>/static/v0/scripts/commodity/common_functions.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/static/v0/scripts/commodity/check_data.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/static/v0/scripts/commodity/commodity_create.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/static/v0/scripts/jquery/jquery.form.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/static/v0/scripts/haha.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/static/v0/scripts/haha_upload.js"></script> <script type="text/javascript"> j = 1; $(function(){ updateDiscountPercentage(); $("#btn_add2").click(function(){ //var newNode='<div id="fileSelectDiv_'+j+'"><div>'; //newNode +='<input id="detailImgFiles_'+j+'" name="detailImgFiles" type="file" /></div>'; //newNode +='<div><input type="button" value="删除"/></div><div>'; //newNode +='<span id="detailImgFiles_'+j+'_span"></span>'; //newNode +='</div></div>'; //$("#newUploadTd").append(newNode); var newNode2='<div id="newImgDiv_'+j+'"><div>'; newNode2+='<textarea dataType="empty|image|*1-500" tipId="detail_span" errormsg="请输入合法的图片链接,并小于500个字符" id="newDetailImgs" name="newDetailImgs" rows="1" cols="100"></textarea>'; newNode2+='</div><div>'; newNode2+='<input type="button" id="btn_delOld2" value="删除"></div></div>'; $("#showResultTd").append(newNode2); j = j + 1; }); $("input[name='needRobert']").click(function(){ var need=$('input:radio[name="needRobert"]:checked').val(); $("tr[name='Show']").toggle(); /* if(need==1){ $("tr[name='Show']").css('display','block'); }else{ $("tr[name='Show']").css('display','none'); } */ }); }); </script> </head> <body> <form:form method="post" action="#" id="hiddenForm" name="hiddenForm"> <input type="hidden" name="selectedCommodityItemNo" id="selectedCommodityItemNo" value="" /> <input type="hidden" name="imgFileName" id="imgFileName" value="" /> </form:form> <form:form commandName="currentCommodity" name="detailDataForm" id="detailDataForm" method="post" enctype="multipart/form-data"> <div id="errorMessage" > <c:if test="${not empty errorMessage }"> <c:out value="${errorMessage }" /> </c:if> </div> <input type="hidden" name="searchFunctionEntry" id="searchFunctionEntry" value="${searchFunctionEntry}" /> <div id="content"> <legend>新建商品</legend> <div></div> <fieldset> <div> <%-- <div> <input type="button" name="save_btn" value='<fmt:message key="button.save"/>' id="save_btn"/> </div>--%> <div> <input type="button" id="return_btn" name="return_btn" value="返回列表" /> </div> </div> </fieldset> <div></div> <table border="0" width="100%"> <tbody> <tr> <td width="20%"> <div> <div> <label for="commodityTitle">商品标题:</label> </div> </div> </td> <td width="80%"> <div> <div> <form:textarea path="title" id="title" dataType="s1-50" tipId="title_span" errormsg="请输入合法字符的标题,并小于50个字符" name="title" rows="1" cols="100" /> </div> <div> <span id="title_span">*</span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="keyword">关键字:</label> </div> </div> </td> <td width="80%"> <div> <div> <form:textarea dataType="empty|s1-50" tipId="keyword_span" errormsg="请输入合法字符的关键字,并小于50个字符" path="keyword" id="keyword" name="keyword" rows="1" cols="100" /> </div> <div> <span id="keyword_span"></span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="commodityType">商品分类:</label> </div> </div> </td> <td width="80%"> <div> <div> <form:radiobutton path="commodityType" id="commodityType" name="commodityType" value="0" /> 虚拟商品 <form:radiobutton path="commodityType" id="commodityType" name="commodityType" value="1" checked="true" /> 实体商品 </div> <div> <span id="commodityType_span">*</span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="currencyType">货币单位:</label> </div> </div> </td> <td width="80%"> <div> <div> <> <form:radiobutton path="currencyType" id="currencyType" name="currencyType" value="1" checked="true" /> 福饼 </div> <div> <span id="commodityType_span">*</span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="pictureLink">图片链接:<span id="preview_myCustImage_span"></span></label> </div> </div> </td> <td width="80%"> <div> <div> <input type="file" id="myCustImage" name="myCustImage" size="45" /> </div> <div> <input type="button" value="上传图片" /> </div> <div> <span id="myCustImage_span" ></span> </div> </div> <div> <div> <form:textarea dataType="image|*1-500" tipId="pictureLink_span" errormsg="请输入合法图片链接,并小于500个字符" path="pictureLink" id="pictureLink" name="pictureLink" rows="2" cols="100" /> </div> <div> <span id="pictureLink_span">*</span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="totalQuantity">总人次:</label> </div> </div> </td> <td width="80%"> <div> <div> <form:input dataType="integer" tipId="totalQuantity_span" errormsg="总人次必须为正整数" path="totalQuantity" id="totalQuantity" name="totalQuantity" type="text" maxlength="6" size="6" /> </div> <div> <span id="totalQuantity_span">*</span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="unitPrice">最低购买注数:</label> </div> </div> </td> <td width="80%"> <div> <div> <form:radiobutton path="unitPrice" id="unitPrice" name="unitPrice" value="1" checked="true" /> 一元 <form:radiobutton path="unitPrice" id="unitPrice" name="unitPrice" value="10" /> 十元 </div> <div> <span id="unitPrice_span">*</span> </div> </div> </td> </tr> <> <tr> <td width="20%" rowspan="2">细节图: <!-- <div> <div> <label for="detailImgs">细节图:<input type="button" value="全部上传" /><span id="preview_detailImgs_span"></span></label> </div> </div> --> </td> <td width="80%" id="newUploadTd"> <div> <div> <input type="file" onchange="fileUpload_onselect(this)" id="detailImgFiles" name="detailImgFiles" /> <input type="button" value="选择图片" /> </div> <div> <input type="button" id="btn_add2" value="增加一行" /> </div> <div> <span id="detailImgFiles_0_span"></span> </div> </div> </td> </tr> <tr> <td width="80%" id="showResultTd"><c:forEach var="tmpEntity" items="${currentBanner.detailImages}" varStatus="status"> <div id="oldImgDiv_${tmpEntity.index}"> <div> <textarea id="oldDetailImgs" name="oldDetailImgs" rows="1" cols="100">${tmpEntity.url}</textarea> <div> <input type="button" id="btn_delOld2" value="删除"> </div> </div> </div> </c:forEach> <div id="newImgDiv_0"> <div> <textarea id="newDetailImgs" dataType="empty|image|*1-500" tipId="detail_span" errormsg="请输入合法的图片链接,并小于500个字符" name="newDetailImgs" rows="1" cols="100"></textarea> </div> </div></td> </tr> <tr> <td></td> <td><span id="detail_span"></span></td> </tr> <tr> <td width="20%"> <div> <div> <label for="tags">标签:</label> </div> </div> </td> <td width="80%"> <div> <c:forEach var="tmpEntity" items="${allTagList}"> <div> <label><input type="checkbox" id="selectedTags" name="selectedTags" value="${tmpEntity.tagId}">${tmpEntity.tagName}</label> <input type="hidden" name="tagName_${tmpEntity.tagId}" id="tagName_${tmpEntity.tagId}" value="${tmpEntity.tagName}" /> </div> </c:forEach> <div> <span id="tags_span">*</span> </div> </div> </td> </tr> <tr> <td width="20%"> <div> <div> <label for="tags">是否需要机器人:</label> </div> </div> </td> <td width="80%"> <div> <div> <form:radiobutton path="needRobert" id="needRobert" name="needRobert" value="1" /> 是 <form:radiobutton path="needRobert" id="needRobert" name="needRobert" value="0" checked="true" /> 否 </div> <div> <span id="unitPrice_span">*</span> </div> </div> </td> </tr> <tr name="Show"> <td width="20%"> <div> <div> <label for="tags">计划售完时间:</label> </div> </div> </td> <td width="80%"> <div> <form:input type="number" path="planSoldTime" dataType="integer" tipId="planSoldTime_" errormsg="必须为正整数" min="0" max="9999" /> <div> <span id="planSoldTime_">*</span> </div> </div> </td> </tr> <tr name="Show"> <td width="20%"> <div> <div> <label for="tags">最大购买次数:</label> </div> </div> </td> <td width="80%"> <div> <form:input type="number" dataType="integer" tipId="regularTriggerTotalTimes_" errormsg="必须为正整数" path="regularTriggerTotalTimes" min="1" max="10" /> <div> <span id="regularTriggerTotalTimes_">*</span> </div> </div> </td> </tr> </div> </tbody> </table> </div> </form:form> <div></div> <div> <div> <input type="button" name="save_btn" id="save_btn" value='提交并预览' /> </div> </div> </body> </html>
这个是html的用法不用考虑其他的就是html代码
function validateForm1(){ var flag=HaHaUtil.checkFrom('detailDataForm'); return flag; }
这个是from表单之前的数据校验的函数。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【jquery自定义表单验证插件】相关文章：