jquery自定义表单验证插件

本文实例为大家分享了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+）*$/）;//emailmap.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（"^[\w\W]{"+nums[0]+","+nums[1]+"}$"）; break;case "n": reg = new RegExp（"^\d{"+nums[0]+","+nums[1]+"}$"）; break;case "s": reg = new RegExp（"^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\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+"" class="form-inline"><div class="form-group">";//newNode +="<input id="detailImgFiles_"+j+"" name="detailImgFiles" type="file" /></div>";//newNode +="<div class="form-group"><input type="button" value="删除" onclick="delDivRow（"fileSelectDiv_"+j+""）"/></div><div class="form-group">";//newNode +="<span id="detailImgFiles_"+j+"_span" class="sr-text highlight"></span>";//newNode +="</div></div>";//$（"#newUploadTd"）.append（newNode）; var newNode2="<div class="form-inline" id="newImgDiv_"+j+""><div class="form-group">";newNode2+="<textarea dataType="empty|image|*1-500" tipId="detail_span" errormsg="请输入合法的图片链接,并小于500个字符" id="newDetailImgs" name="newDetailImgs" rows="1" cols="100"></textarea>";newNode2+="</div><div class="form-group">  ";newNode2+="<input type="button" id="btn_delOld2" value="删除" onclick="delDivRow（"newImgDiv_"+j+""）"></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"style="color: #ff2233; font-size: 14px; text-align: center;"><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" class=" yui-g member_"><legend>新建商品</legend><div class="h10px"></div><fieldset><div class="form-inline"> <%-- <div class="form-group"><input type="button" name="save_btn" class="btn btn-default toTop_o_deg btn_width_1" onclick="createNewAppointment（）;" value="<fmt:message key="button.save"/>" id="save_btn"/></div>--%> <div class="form-group"> <input type="button" id="return_btn" name="return_btn"class="btn btn-default" value="返回列表"onclick="returnToSeachFunction（"${searchFunctionEntry}"）;" /> </div></div></fieldset><div class="h10px"></div><table border="0" width="100%"><tbody> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="commodityTitle" class="sr-outer">商品标题:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <form:textarea path="title" id="title" dataType="s1-50" tipId="title_span" errormsg="请输入合法字符的标题,并小于50个字符" name="title" rows="1" cols="100" /></div><div class="form-group"> <span id="title_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="keyword" class="sr-outer">关键字:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <form:textarea dataType="empty|s1-50" tipId="keyword_span" errormsg="请输入合法字符的关键字,并小于50个字符" path="keyword" id="keyword" name="keyword" rows="1" cols="100" /></div><div class="form-group"> <span id="keyword_span" class="sr-text highlight"></span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="commodityType" class="sr-outer">商品分类:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <form:radiobutton path="commodityType" id="commodityType" name="commodityType" value="0" /> 虚拟商品    <form:radiobutton path="commodityType" id="commodityType" name="commodityType" value="1" checked="true" /> 实体商品</div><div class="form-group"> <span id="commodityType_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="currencyType" class="sr-outer">货币单位:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <！-- <form:radiobutton path="currencyType" id="currencyType" name="currencyType" value="0"/>福豆    --> <form:radiobutton path="currencyType" id="currencyType" name="currencyType" value="1" checked="true" /> 福饼</div><div class="form-group"> <span id="commodityType_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="pictureLink" class="sr-outer">图片链接:<span id="preview_myCustImage_span"></span></label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <input type="file" id="myCustImage" name="myCustImage" size="45" /></div><div class="form-group"> <input type="button" value="上传图片" onclick="ajaxFileUpload（"myCustImage","pictureLink"）" /></div><div class="form-group">   <span id="myCustImage_span" class="sr-text highlight"></span></div></div><div class="form-inline"><div class="form-group"> <form:textarea dataType="image|*1-500" tipId="pictureLink_span" errormsg="请输入合法图片链接,并小于500个字符" path="pictureLink" id="pictureLink" name="pictureLink" rows="2" cols="100" /></div><div class="form-group"> <span id="pictureLink_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="totalQuantity" class="sr-outer">总人次:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <form:input dataType="integer" tipId="totalQuantity_span" errormsg="总人次必须为正整数" path="totalQuantity" id="totalQuantity" name="totalQuantity" class="form-control" type="text" maxlength="6" size="6" /></div><div class="form-group"> <span id="totalQuantity_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="unitPrice" class="sr-outer">最低购买注数:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <form:radiobutton path="unitPrice" id="unitPrice" name="unitPrice" value="1" checked="true" /> 一元    <form:radiobutton path="unitPrice" id="unitPrice" name="unitPrice" value="10" /> 十元</div><div class="form-group"> <span id="unitPrice_span" class="sr-text highlight">*</span></div></div> </td> </tr> <！-- 细节图 --> <tr> <td width="20%" rowspan="2">细节图: <！--<div class="form-inline"> <div class="form-group"><label for="detailImgs" class="sr-outer">细节图:  <input type="button" value="全部上传" onclick="uploadDetailImgs（）;" /><span id="preview_detailImgs_span"></span></label> </div> </div> --> </td> <td width="80%" id="newUploadTd"><div class="form-inline"><div class="form-group"> <input type="file" onchange="fileUpload_onselect（this）" style="display: none;" id="detailImgFiles" name="detailImgFiles" /> <input type="button" value="选择图片" onclick="document.getElementById（"detailImgFiles"）.click（）;" /></div><div class="form-group" style="margin-left: 20px"> <input type="button" id="btn_add2" value="增加一行" /></div><div class="form-group"> <span id="detailImgFiles_0_span" class="sr-text highlight"></span></div></div> </td> </tr> <tr> <td width="80%" id="showResultTd"><c:forEach var="tmpEntity"items="${currentBanner.detailImages}" varStatus="status"><div class="form-inline" id="oldImgDiv_${tmpEntity.index}"> <div class="form-group"> <textarea id="oldDetailImgs" name="oldDetailImgs" rows="1"cols="100">${tmpEntity.url}</textarea> <div class="form-group"><input type="button" id="btn_delOld2" value="删除"onclick="delDivRow（"oldImgDiv_${tmpEntity.index}"）"> </div> </div></div></c:forEach><div class="form-inline" id="newImgDiv_0"><div class="form-group"> <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" class="sr-text highlight"></span></td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="tags" class="sr-outer">标签:</label></div></div> </td> <td width="80%"><div class="form-inline"><c:forEach var="tmpEntity" items="${allTagList}"> <div class="form-group"> <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 class="form-group"> <span id="tags_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="tags" class="sr-outer">是否需要机器人:</label></div></div> </td> <td width="80%"><div class="form-inline"><div class="form-group"> <form:radiobutton path="needRobert" id="needRobert" name="needRobert" value="1" /> 是    <form:radiobutton path="needRobert" id="needRobert" name="needRobert" value="0" checked="true" /> 否</div><div class="form-group"> <span id="unitPrice_span" class="sr-text highlight">*</span></div></div> </td> </tr> <tr style="display: none;" name="Show"> <td width="20%"><div class="form-inline"><div class="form-group"> <label for="tags" class="sr-outer">计划售完时间:</label></div></div> </td> <td width="80%"><div class="form-inline"><form:input type="number" path="planSoldTime" dataType="integer" tipId="planSoldTime_" errormsg="必须为正整数" class="planSoldTime_" min="0" max="9999" /><div class="form-group"> <span id="planSoldTime_" class="sr-text highlight">*</span></div></div> </td> </tr> <tr style="display: none;" name="Show"> <td width="20%"><div class="form-inline"> <div class="form-group"> <label for="tags" class="sr-outer">最大购买次数:</label> </div></div> </td> <td width="80%"><div class="form-inline"><form:input type="number" dataType="integer" tipId="regularTriggerTotalTimes_" errormsg="必须为正整数" class="regularTriggerTotalTimes_" path="regularTriggerTotalTimes" min="1" max="10" /><div class="form-group"> <span id="regularTriggerTotalTimes_" class="sr-text highlight">*</span></div></div> </td> </tr> </div></tbody></table> </div> </form:form> <div class="h10px"></div> <div class="form-inline"> <div class="form-group"><input type="button" name="save_btn" id="save_btn"class="btn btn-default toTop_o_deg btn_width_1"onclick="createNewCommodity（）;" value="提交并预览" /> </div> </div></body></html>

这个是html的用法不用考虑其他的就是html代码

 function validateForm1（）{var flag=HaHaUtil.checkFrom（"detailDataForm"）; return flag; }

这个是from表单之前的数据校验的函数。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。