使用js原生代码模拟jquery validate表单提交验证

  • A+
所属分类:JavaScript

组件背景

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

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

使用js原生代码模拟jquery validate表单提交验证

源码

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

1.验证组件代码

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

发表评论

:?: :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

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