首页 > 编程 > JavaScript > 正文

jquery自定义表单验证插件

2019-11-20 08:46:31
字体:
来源:转载
供稿:网友

本文实例为大家分享了jquery表单验证插件,供大家参考,具体内容如下

//正则表达式var map = new Map();map.put("*", /[/w/W]+/);map.put("*6-16", /^[/w/W]{6,16}$/);map.put("n", /^/d+$/);map.put("n6-16", /^/d{6,16}$/);map.put("s", /^[/u4E00-/u9FA5/uf900-/ufa2d/w/./s]+$/);map.put("s6-16", /^[/u4E00-/u9FA5/uf900-/ufa2d/w/./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 = /^n/d{1,}-/d{1,}$/;  var reg3 = /^s/d{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)) {  ///^[/w/W]{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表单之前的数据校验的函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表