自定义表单验证组件validate

  • A+
所属分类:JavaScript

组件背景

由于公司的一个内部项目要使用到表单的验证组件,但是又不想存在太多的依赖后期希望存在很多的自定义,so本站作者(https://www.yinli.org)考虑到既然都要写验证了,那就写一个全局的验证组件把,考虑了一段时间想法是由class和自定义标签、正则表达式组成吧,,现在把写好的代码共享出来,各位有什么问题可以给我的站点(https://www.yinli.org)留言,我看到会给各位回复的,刚刚写好的时候组件和jquery有很多的依赖,后来重新做了解耦,不然就么有必须这个组件了,由于本人也是新手有什么不好的请不要乱喷。

下面先给个截图,例子写的有点难看,不要介意

自定义表单验证组件validate

源码

下面就不废话了直接上代码:

1.验证组件代码

  1. /***
  2.  * 验证组件(验证组件以和提示异常div整合),验证不可以组合使用
  3.  * auto:lqy
  4.  * data:2017
  5.  * 注:该组件必须依赖errorDiv.js
  6.  * 验证方式,添加类型到class中:joyInt(必填整数) joyDecimal(必填小数或者整数),joyRequired(必填)
  7.  * 提示文案:如果要提示必须在input中添加自定义error_msg=文案
  8.  ***/
  9. var $classValidationArray  = ['joyRequired','joyInt','joyDecimal'];
  10. var validationCustom=function($_id){
  11.     //返回异常类
  12.     var errorArr = [] ;
  13.     //一共几个无法通过验证
  14.     var errorlength = 0;
  15.     //fromt表单对象
  16.     var $fromtObj =  document.getElementById($_id);
  17.     //获取全部的input对象
  18.     var $allInputObj = $fromtObj.getElementsByTagName('input');
  19.     _validation();
  20.     //调用错误提示
  21.     _callErrorDiv(errorArr);
  22.     return {"errorlength":errorlength,"errorArr":errorArr};
  23.     //组件验证主入口
  24.     function _validation (){
  25.         if($allInputObj.length > 0){
  26.             for(var i = 0 ;i < $allInputObj.length ;i++){
  27.                 //判断是否通过验证
  28.                 var resultFcuntion = _validationType($allInputObj[i].getAttribute("class")+"");
  29.                 //返回值不为空的时候调用返回方法
  30.                 if(resultFcuntion != 'null' && resultFcuntion != null){
  31.                     var resultTypeValidationData = eval(resultFcuntion+"(" +" '"+$allInputObj[i].value+"' "+")");
  32.                     //验证不通过返回true
  33.                     //验证对象的值最大长度是否正确
  34.                     var resultMaxLenValidationData =  joyInputValMaxLen($allInputObj[i]);
  35.                     if( resultTypeValidationData.is_through == true || resultMaxLenValidationData.is_through == true){
  36.                         $allInputObj[i].setAttribute("error_msgs",$allInputObj[i].getAttribute("error_msg")+(resultMaxLenValidationData.is_through == true?resultTypeValidationData.msg+","+resultMaxLenValidationData.msg:resultTypeValidationData.msg));
  37.                         //异常提示
  38.                         var internalError ='';
  39.                         if(resultTypeValidationData.is_through == true ){
  40.                             internalError = resultTypeValidationData.msg;
  41.                         }
  42.                         if(resultMaxLenValidationData.is_through == true){
  43.                             if(internalError.length > 0 ){
  44.                                 internalError +=",";
  45.                             }
  46.                             internalError +=resultMaxLenValidationData.msg;
  47.                         }
  48.                         $allInputObj[i].setAttribute("validation_result_msg",internalError);
  49.                         $allInputObj[i].setAttribute("fromt_subscript",i);
  50.                         errorArr[errorlength] = $allInputObj[i];
  51.                         errorlength++;
  52.                     }
  53.                 }
  54.             }
  55.         }
  56.     }
  57.     /**
  58.      * 错误异常提示
  59.      */
  60.     function _callErrorDiv(errorArr){
  61.         //调用错误提示
  62.         if(errorArr.length > 0){
  63.             var errorMsgArr = new Array();
  64.             for(var i=0;i<errorArr.length;i++){
  65.                 var errorMsg =  errorArr[i].getAttribute("error_msgs");
  66.                 if(errorMsg != null && errorMsg !="" && errorMsg !="null" ){
  67.                     errorMsgArr[i]=errorMsg;
  68.                 }
  69.                 inputObvious(errorArr[i],$_id);
  70.             }
  71.             // errorDiv(errorMsgArr);
  72.         }
  73.     }
  74.     /**
  75.      * 样式存在required表示必须填写
  76.      * @param objClassArray
  77.      * @returns {Number}
  78.      */
  79.     function _validationType(checkObjClassArray){
  80.         var resultFcuntion = null;
  81.         for(var i =0 ;i < $classValidationArray.length; i++){
  82.             resultFcuntion=_contains(checkObjClassArray.split(" "),$classValidationArray[i])==true?$classValidationArray[i]:null;
  83.             if(resultFcuntion !=null && resultFcuntion !='null' ){
  84.                 return resultFcuntion;
  85.             }
  86.         }
  87.         return resultFcuntion;
  88.     }
  89.     /***
  90.      * 匹配是否相同
  91.      */
  92.     function _contains(arr, obj) {
  93.         var i = arr.length;
  94.         while (i--) {
  95.             if (arr[i] === obj) {
  96.                 return true;
  97.             }
  98.         }
  99.         return false;
  100.     }
  101. }
  102. /***
  103.  * 明显标记
  104.  * @param $checkObj 对象
  105.  * @param $_id 表单id
  106.  * @returns {String}
  107.  */
  108. function inputObvious($checkObj,$_id){
  109.     var errorMsg =  $checkObj.getAttribute("validation_result_msg");
  110.     if(errorMsg == null || errorMsg =="" || errorMsg =="null" || errorMsg =='undefined'){
  111.         errorMsg="";
  112.     }
  113.     var fromtSubscript = $checkObj.getAttribute("fromt_subscript");
  114.     var joyrunErrorSpan = document.getElementById("joyrun_error_span_"+$_id+"_"+fromtSubscript);
  115.     if(joyrunErrorSpan == null || joyrunErrorSpan =="" || joyrunErrorSpan.length <= 0){
  116.         //原生元素对象后面最加
  117.         $checkObj.insertAdjacentHTML('afterend', '<span id="joyrun_error_span_'+$_id+"_"+fromtSubscript+'" class="help-inline joyrun_error" style="color:red;white-space: nowrap;">'+errorMsg+'</span>');
  118.     }else{
  119.         document.getElementById("joyrun_error_span_"+$_id+"_"+fromtSubscript).innerHTML=errorMsg;
  120.     }
  121.     //标记对象颜色为红色     
  122.     $checkObj.setAttribute("style","border:1px solid red");
  123.     $checkObj.onclick=function(){
  124.         $checkObj.setAttribute("style","border:");
  125.         document.getElementById("joyrun_error_span_"+$_id+"_"+fromtSubscript).innerHTML="";
  126.     };
  127.     return errorMsg;
  128. }
  129. /**
  130.  * 验证值长度
  131.  * @param $checkObj
  132.  * @returns
  133.  */
  134. function joyInputValMaxLen($checkObj){
  135.     var joyLength = $checkObj.getAttribute("joyMaxLength");
  136.     if(!(joyLength == null || joyLength =="" || joyLength =="null") && joyLength >0){
  137.         //验证长度
  138.         if(!($checkObj.value == "" || $checkObj.value == null) && $checkObj.value.length > joyLength){
  139.             return {"is_through":true,"msg":"不能超"+joyLength+"个字"}
  140.         }
  141.     }
  142.     return {"is_through":false,"msg":""};
  143. }
  144. //必须填写,不可以为空
  145. function joyRequired($checkObjVal){
  146.     var msg = "必填项";
  147.     if($checkObjVal == "" || $checkObjVal == null || $checkObjVal.trim() == ""){
  148.         return {"is_through":true,"msg":msg};
  149.     }
  150.     return {"is_through":false,"msg":""};
  151. }
  152. //必须填写并且为整数
  153. function joyInt($checkObjVal){
  154.     var msg = "必须为整数";
  155.     if(!/^-?\d+$/.test($checkObjVal)){
  156.         return {"is_through":true,"msg":msg};
  157.     }
  158.     return {"is_through":false,"msg":""};
  159. }
  160. //必须填写并且必须为小数或者整数
  161. function joyDecimal($checkObjVal){
  162.     var msg = "必须为整数或小数";
  163.     if((/^-?\d+$/.test($checkObjVal)||/^-?\d+\.\d+$/.test($checkObjVal))==false){
  164.         return {"is_through":true,"msg":msg};
  165.     }
  166.     return {"is_through":false,"msg":""};
  167. }

调用例子

  1. <form id="searchForm">
  2.     <input type="text" id="uname" class="joyRequired" value="aaaa" joyMaxLength="3" error_msg="姓名">
  3.     <input type="submit"  onclick="searchClickFunction()" value="提交" />
  4. </form>
  5. <script src="file:///Users/liuqiyu/Downloads/js_validation/validation.js" type="text/"></script>
  6. <script type="text/javascript">
  7.     validationCustom("searchForm");
  8. </script>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar New引力-only 2

      有什么问题可以留言,我看到会给各位留言的