关于编写通用脚本验证的一点思路

最新推荐文章于 2020-07-16 21:37:00 发布

好风软件工作日

最新推荐文章于 2020-07-16 21:37:00 发布

阅读量1.1k

点赞数

分类专栏： JAVASCRIPT 文章标签：脚本 function html struts dojo 服务器

本文链接：https://blog.csdn.net/haofeng82/article/details/1657298

版权

JAVASCRIPT 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

想写一个比较通用的提交表单时的脚本验证程序，因为一个个的编写每个字段的验证实在是太麻烦了，昨天花了两个小时想了一下，感觉一个通用的验证应该有如下特点：

1 不应该和<html>代码有任何关联，例如通过向表单元素上增加自己的属性，这样会使html代码可读性降低。如果使用服务器端tag（如struts的html标签），可能连编译都过不去。

2 错误信息展示方式应该是可以扩充的，用mvc的观点来说就是view层可以是多个，举个例子，我们既可以使用alert语句输出，也可以在页面特定的位置输出。

3 易于使用，如果配置的代码比不用时的代码还要复杂，就失去了意义，同时应该使使用者容易理解

4 支持服务器端验证，可以通过ajax等技术实现

简单想了一下，暂时采用在页面上编写一个js对象的方式作为配置文件的定义：

例如：

var checkRegular=
        [
          { elementId:"jhmc",
            elementType:"inputText",
            rules:[ {typeName:"notEmpty",errorMsg:"名称字段不能为空!"},
                     {typeName:"maxLength",typeValue:"16",errorMsg:"名称字段不能多于8个汉字!"}
                   ]
          },
          { elementId:"ssnf",
            elementType:"inputText",
            rules:[ {typeName:"notEmpty",errorMsg:"年份字段不能为空!"},
                      {typeName:"isInteger",errorMsg:"年份字段必须为大于零的整型数字!"}
                   ]
          },
          { elementId:"sqyy",
            elementType:"area",
            rules:[ {typeName:"notEmpty",errorMsg:"申请原因字段不能为空!"},
                      {typeName:"maxLength",typeValue:"300",errorMsg:"申请原因字段长度不能多于150个汉字"}
                   ]
          }

];

通过配置可以进行各种验证类型的匹配选择，进行验证，并将错误信息作为一个数组返回，此时可以选择不同的展示方式去展示错误信息。

下面是我写的一段整合到dojo中的验证程序代码，此代码定义了一个js类，在类的check方法中接收一个上面定义的配置文件类型的js对象，然后根据规则进行判断，将错误信息返回。大家觉得这种方式是否可取呢？？

dojo.provide("dojo.commonValidate.CommonValidator");
dojo.commonValidate.CommonValidator =function(){

}
dojo.commonValidate.CommonValidator.prototype.check=function(regular){
var resultArray=[];
//循环遍历每一个配置对象中的项,分别进行验证,并返回验证信息
for(var i=0;i<regular.length;i++){
      //由于如果需要验证一组chekBox的话,需要通过名称进行验证,所以这里有可能是id,也有可能是name
      var elementId=regular[i].elementId;
      var elementType=regular[i].elementType;
      var checkedValue=this.getCheckedValue(regular[i]);
      //得到增加到一个元素上的验证规则数组
      var rules=regular[i].rules;
      for(var j=0;j<rules.length;j++){
           var rule= rules[j];
           var result=this.checkValidate(checkedValue,rule);
           //如果针对于一个字段的验证返回不成功,则会中止下面的验证,并将错误信息存入错误结果集合
           if(result.isPass==false){
              resultArray[resultArray.length++]=result;
              break;
           }
      }
}


   return this.getErrorMessage(resultArray);
}
//根据验证结果集合里的数据,生成展示数据
dojo.commonValidate.CommonValidator.prototype.getErrorMessage=function(resultArray){
   var returnObj={isPass:true,message:""};
   if(resultArray.length>0){
     returnObj.message+="您输入的信息在格式上存在如下问题：/n/n";
   }
   for(var i=0;i<resultArray.length;i++){
       returnObj.isPass=false;

       returnObj.message+=resultArray[i].msg+"/n/n";
   }
   return returnObj;
}
dojo.commonValidate.CommonValidator.prototype.getCheckedValue=function(element){
    var elementId=element.elementId;
    var elementType=element.elementType;
    //判断当前元素的类型,如果是一般的类型,则使用document.getElementById
    if(elementType!="checkBox"){
      var element=document.getElementById(elementId);
      if(element!=null){
         var value=element.value;
         return value;
      }
    }
}

dojo.commonValidate.CommonValidator.prototype.checkValidate=function(checkedValue,rule){
    //当前规则是进行非空验证的,则会转向非空验证处理
    if(rule.typeName=="notEmpty"){
       if(checkedValue==null||checkedValue.length<=0){
          return {"isPass": false,msg:rule.errorMsg};
       }
       else{
          return {"isPass": true,msg:"检测通过"};
       }
    }
    else
      //如果是进行最大长度验证,则会转向最大长度验证处理代码
       if(rule.typeName=="maxLength"){
          if(checkedValue!=null&&checkedValue.length<=parseInt(rule.typeValue)){
            return {"isPass": true,msg:"检测通过"};
          }
          else{

            return {"isPass": false,msg:rule.errorMsg};
          }
       }

       else
           //如果是进行整型数字验证,则会转向整型验证代码
           if(rule.typeName=="isInteger"){
              if(!checkedValue.match(/^[0-9]*[1-9][0-9]*$/)){
                 return {"isPass": false,msg:rule.errorMsg};
              }

              return {"isPass": true,msg:"检测通过"};

           }

      return {"isPass": false,msg:"没有找到可匹配的验证规则!!"};


}