编程 Javascript

jquery自定义表单验证插件

Posted in Javascript onOctober 12, 2016

本文实例为大家分享了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+)*$/);//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 = /^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表单之前的数据校验的函数。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery自定义表单验证插件

- Author -

张虹旺

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

不错的新闻标题颜色效果

Dec 10 Javascript

文本链接逐个出现的js脚本

Dec 12 Javascript

IE和firefox浏览器的event事件兼容性汇总

Dec 06 Javascript

jQuery使用数组编写图片无缝向左滚动

Dec 11 Javascript

jquery得到iframe src属性值的方法

Sep 25 Javascript

jquery插件splitScren实现页面分屏切换模板特效

Jun 16 Javascript

JavaScrip调试技巧之断点调试

Oct 22 Javascript

如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上

Dec 26 Javascript

JS实现漂亮的时间选择框效果

Aug 20 Javascript

详谈js原型继承的一些问题

Sep 06 Javascript

Vue面试题及Vue知识点整理

Oct 07 Javascript

微信小程序scroll-view的滚动条设置实现

Mar 02 Javascript

jquery 动态增加删除行的简单实例(推荐)

Oct 12 #Javascript

老生常谈javascript的类型转换

Oct 12 #Javascript

vue制作加载更多功能的正确打开方式

Oct 12 #Javascript

将form表单通过ajax实现无刷新提交的简单实例

Oct 12 #Javascript

深入理解Node.js的HTTP模块

Oct 12 #Javascript

纯js实现手风琴效果代码

Apr 17 #Javascript

JavaScript 继承详解（六）

Oct 11 #Javascript