通用表单验证函数 - FormCheck JavaScript Function

简介: 以前在开发项目的时候,在没使用EXTJS之前,写了这个通用的表单验证函数。 在实际开发过程中,使用非常简单,确实大幅提高了开发效率 现在虽然用不到了,但扔了感觉可惜,留在这里当个纪念吧!   通用表单验证函数使用说明     Author : netwild   最后更新日期:2009-07-02     一、函数功能     在编写WEB应用时,经常需要对各种表单进行输入验证,为了节省开发时间,增加开发效率,编写统一验证函数。

以前在开发项目的时候,在没使用EXTJS之前,写了这个通用的表单验证函数。

在实际开发过程中,使用非常简单,确实大幅提高了开发效率

现在虽然用不到了,但扔了感觉可惜,留在这里当个纪念吧!


  通用表单验证函数使用说明 
 
  Author : netwild   最后更新日期:2009-07-02 
 
  一、函数功能 
 
  在编写WEB应用时,经常需要对各种表单进行输入验证,为了节省开发时间,增加开发效率,编写统一验证函数。 
 
  二、函数说明 
 
  function chkForm(object form) 
 
  参数form为表单对象,支持两种方式: 
 
  1、表单对象:<form onsubmit="return chkForm(this)"> 
 
  2、表单名称:<form name="form1" onsubmit="return chkForm('form1')"> 
 
  返回值:boolean 
 
  三、与验证相关的属性 
 
    属性名称 属性类型   说明           默认值   适用控件                       
    enNull   扩展属性   是否允许为空       true     input(text、radio、checkbox)、textarea、select 
    len   扩展属性   输入字符个数范围     0,2000     input(text)、textarea               
    temp   扩展属性   验证模版         无       input(text)、textarea               
    match   扩展属性   自定义规则       无       input(text)、textarea               
    skip   扩展属性   跳过验证         false     input(radio、checkbox)、select           
    title   标准属性   字段名称         无       任何控件                       
 
 
  四、属性说明 
 
  1、enNull 
 
  例如: <input type="text" name="inpUname" enNull="false" title="用户名" />   //表示该输入框不允许为空 
 
  <input type="radio" name="rdoSex" enNull="false" title="性别" />   //表示该组单选框为必选项 
  <input type="radio" name="rdoSex"  />   //在首个标签上注明即可 
 
  <input type="checkbox" name="chbDev" enNull="false" title="技术" />   //表示该组复选框为必选项 
  <input type="checkbox" name="chbDev"  />   //在首个标签上注明即可 
  <input type="checkbox" name="chbDev"  /> 
 
  2、len 
 
  例如: <input type="text" name="inpUname" len="6,18" title="用户名" />   //表示输入的字符个数在6到18个之间
  //使用len属性,可以省略enNull属性
 
  3、temp 
 
  取值范围: 
 
  number:匹配数值型,包括整数、负数、小数,并且小数位数不超过6位。 
 
  例如:423、-376、57.89、-0.34 都符合;sds、422.、.237 都不符合 
 
  number5:匹配数值型,包括整数、负数、小数,并且小数位数不超过5位。 
 
  number4:匹配数值型,包括整数、负数、小数,并且小数位数不超过4位。 
 
  number3:匹配数值型,包括整数、负数、小数,并且小数位数不超过3位。 
 
  number2:匹配数值型,包括整数、负数、小数,并且小数位数不超过2位。 
 
  number1:匹配数值型,包括整数、负数、小数,并且小数位数不超过1位。 
 
  number(len1,len2):匹配数值型,包括整数、负数、小数,并且整数部分最长不超过len1,小数部分最长不超过len2 新!
 
  money:匹配货币型,包括整数、负数、1位或2位小数 
 
  int:匹配数值型,包括整数、负数,不匹配小数 
 
  uint:匹配无符号数值型,包括正整数,不匹配小数 
 
  var:匹配变量命名规范,可包括:英文字母、数字和下划线,并且必须以英文字母开头 
 
  string:匹配字符型,包括任何字符及换行符 
 
  date:匹配标准的10位长度的日期型,例如:2009-06-24 
 
  time:匹配标准的8位长度的时间型,例如:16:51:08 
 
  datetime:匹配19位长度的日期+时间型 
 
  timestep:匹配0-60之间的整数 
 
  weekstep:匹配0-7之间的整数 
 
  monthstep:匹配0-30之间的整数 
 
  exp01:表达式:str='value' 
 
  input:匹配除英文双引号、单引号之外的任意字符 
 
  parame:匹配除英文双引号、单引号、@ # % & * . ? 和空格之外的任意字符 
 
  4、match 
 
  该属性值为标准的JavaScript正则表达式。但不包括:^(起始符)、$(截止符) 
 
  为统一验证规则,除非极特殊情况之外,不建议直接使用match属性进行验证。 
 
  5、skip 
 
  该属性表示“跳过验证”,通常用于单选框、复选框及下拉框中,使用了enNull属性,但其中某些选项需要例外的情况 
 
  例如: <select title="城市" enNull="false"> 
  <option skip="true">--- 辽宁省 ---</option> 
  <option>沈阳</option> 
  <option>辽阳</option> 
  <option>大连</option> 
  <option skip="true">--- 广东省 ---</option> 
  <option>广州</option> 
  <option>深圳</option> 
  <option>东莞</option> 
  <option skip="true">--- 山东省 ---</option> 
  <option>济南</option> 
  <option>青岛</option> 
  </select> 
 
  //该下拉框为必选项,但只想选择其中的“市”,因此为“省”增加属性:skip=true,即使选择该项,也做无效处理。
 
  6、title 
 
  控件名称描述 
 
  对于单选框和复选框来说,仅在第一个标签上设置该属性即可,其他同名的一组内的标签将默认继承第一个标签的设置。

 

 

  1  /* *  
  2  * @fileoverview 表单验证相关函数  
  3  * JavaScript.  
  4  *  
  5  * @author 网无忌 netwild@163.com  
  6  * @version 1.0  
  7  */    
  8    
  9  /* *  
 10  * 验证表单输入规则(自定义)  
 11  * @type boolean  
 12  * @returns 验证结果 true/false  
 13  */    
 14  var  formChkDefaultMatch  =  {enNull: true ,len: ' 0,2000 ' ,match: '' ,tempList:[]}   
 15    
 16  // --- 设置 验证模版结束 --------------   
 17    
 18  function  arrLook(prmArr,prmSub){ var  index  =   - 1 ; for ( var  i = 0 ;i < prmArr.length;i ++ ){ if (prmArr[i] == prmSub){index  =  i; break ;}} return  index;}   
 19  function  chkForm(prmFormName){   
 20       var  frmObj  =  ( typeof (prmFormName)  ==   " string " ) ? document.getElementsByName(prmFormName)[ 0 ]:prmFormName;   
 21       if ( typeof (frmObj)  ==   " undefined " return   false ;   
 22       var  frmEmts  =  frmObj.elements;   
 23       var  frmEmtsCnt  =  frmEmts.length;   
 24       var  checkObjList  =  [],arrObjList  =  [];   
 25       var  emtChkRet;   
 26       for ( var  i = 0 ;i < frmEmtsCnt;i ++ ){   
 27           var  emtObj  =  frmEmts[i];   
 28           var  emtObjTagName  =  emtObj.tagName.toLowerCase();   
 29           if (emtObjTagName  ==   " input "   ||  emtObjTagName  ==   " textarea " ){   
 30               var  emtObjType  =  (emtObj.type  ==  undefined) ? " text " :emtObj.type;   
 31               if (emtObjType  ==   " text " ){   
 32                  emtChkRet  =  chkInputText(emtObj);   
 33                   if ( ! emtChkRet.value){alert(emtChkRet.desc);emtObj.focus(); return   false }   
 34              } else   if (emtObjType  ==   " radio "   ||  emtObjType  ==   " checkbox " ){   
 35                   if (arrLook(checkObjList,emtObj.name)  >   - 1 continue ;   
 36                  checkObjList.push(emtObj.name);   
 37                  emtChkRet  =  chkInputCheck(frmObj,emtObj);   
 38                   if ( ! emtChkRet.value){alert(emtChkRet.desc);emtObj.focus(); return   false }   
 39              }   
 40          } else   if (emtObjTagName  ==   " select " ){   
 41              emtChkRet  =  chkSelect(emtObj);   
 42               if ( ! emtChkRet.value){alert(emtChkRet.desc);emtObj.focus(); return   false }   
 43          }   
 44      }   
 45       return   true ;   
 46  }   
 47    
 48  /* *  
 49  * 验证文本框  
 50  */    
 51  function  chkInputText(prmObj){   
 52       var  tmpValue  =  prmObj.value;   
 53       var  tmpLen  =  prmObj.value.length;   
 54       var  tmpDesc  =  (prmObj.title  ==   "" ) ? prmObj.name:prmObj.title;   
 55       var  defEnNull  =  (prmObj.enNull  ==  undefined) ? formChkDefaultMatch.enNull:(prmObj.enNull != " false " );   
 56       var  defLen  =  (prmObj.len  ==  undefined) ? formChkDefaultMatch.len:prmObj.len;    
 57       var  defMatch  =  (prmObj.temp  ==  undefined) ? formChkDefaultMatch.match:prmObj.temp;   
 58       var  defMatchDesc  =   "" ;   
 59       if (defMatch  !=   ""   &&   / number\(\d+\,\d+\) / .test(defMatch)){ var  m = defMatch.match( / number\((\d+)\,(\d+)\) / ); if (parseInt(m[ 2 ]) > 0 ){defMatch = " (\\-)?[\\d\\,]{1, " + m[ 1 ] + " }(\\.(\\d){1, " + m[ 2 ] + " })? " ;defMatchDesc = " 允许的类型:数值型,并且整数位数最大  " + m[ 1 ] + "  位,小数位数最大  " + m[ 2 ] + "  位 " } else {defMatch = " (\\-)?[\\d\\,]{1, " + m[ 1 ] + " } " ;defMatchDesc = " 允许的类型:整数型,并且整数位数最大  " + m[ 1 ] + "  位 " }}   
 60       else   if (defMatch  !=   "" ){ for ( var  i = 0 ;i < formChkDefaultMatch.tempList.length;i ++ if (defMatch  ==  formChkDefaultMatch.tempList[i][ 0 ]) {defMatch  =  formChkDefaultMatch.tempList[i][ 1 ];defMatchDesc  =  formChkDefaultMatch.tempList[i][ 2 ]; break }}   
 61      defMatch  =  (prmObj.match  ==  undefined) ? defMatch:prmObj.match;   
 62       if (( ! defEnNull)  &&  (tmpValue  ==   "" ))  return  {desc: ' ' + tmpDesc + ' ”不允许为空! ' ,value: false };   
 63       if (tmpLen < defLen.split( " , " )[ 0 ||  tmpLen > defLen.split( " , " )[ 1 ])  return  {desc: ' ' + tmpDesc + ' ”的输入长度不符合要求[ ' + defLen + ' ]! ' ,value: false };   
 64       if (defMatch  !=   ""   &&  tmpValue  !=   "" )    
 65           try { if ( ! eval( " /^ " + defMatch + " $/ " ).test(tmpValue)) return  {desc: ' ' + tmpDesc + ' ”的输入格式不符合要求!\t\n\t\n ' + defMatchDesc,value: false }}   
 66           catch (e){ return  {desc: ' ' + tmpDesc + ' ”的验证规则错误! ' ,value: false }}   
 67       return  {desc:tmpDesc,value: true };   
 68  }   
 69  /* *  
 70  * 验证单选、复选  
 71  */    
 72  function  chkInputCheck(frmObj,prmObj){   
 73       var  tmpObjs  =  frmObj.all[prmObj.name];   
 74       var  tmpDesc  =  (prmObj.title  ==   "" ) ? prmObj.name:prmObj.title;   
 75       var  enNull  =  (prmObj.enNull  ==  undefined) ? formChkDefaultMatch.enNull:(prmObj.enNull != " false " );   
 76       var  tmpObj,isChecked  =   false ;   
 77       for ( var  i = 0 ;i < tmpObjs.length;i ++ ){   
 78          tmpObj  =  tmpObjs[i];   
 79           if ((tmpObj.skip  !=   " true " &&  tmpObj.checked) isChecked  =   true ;   
 80           if (( ! enNull)  &&  isChecked)  return  {desc:tmpDesc,value: true }   
 81      }   
 82       if (enNull)  return  {desc:tmpDesc,value: true }   
 83       else   return  {desc: ' 请至少选择“ ' + tmpDesc + ' ”其中一个选项! ' ,value: false }   
 84  }   
 85  /* *  
 86  * 验证下拉框  
 87  */    
 88  function  chkSelect(prmObj){   
 89       var  tmpDesc  =  (prmObj.title  ==   "" ) ? prmObj.name:prmObj.title;   
 90       var  enNull  =  (prmObj.enNull  ==  undefined) ? formChkDefaultMatch.enNull:(prmObj.enNull != " false " );   
 91       if (enNull)  return  {desc:tmpDesc,value: true }   
 92       if (prmObj.options.length  <   1 return  {desc: ' ' + tmpDesc + ' ”的候选项为空! ' ,value: false }   
 93       if (prmObj.options[prmObj.options.selectedIndex].skip  ==   " true " return  {desc: ' 请至少选择“ ' + tmpDesc + ' ”其中一个选项! ' ,value: false }   
 94       else   return  {desc:tmpDesc,value: true }   
 95  }   
 96  /* *  
 97  * 验证日期范围是否合理  
 98  */    
 99  function  chkDateRange(prmDate1,prmDate2){   
100       var  pat  =   / \d{4}\-\d{2}\-\d{2} / ;   
101       if ( ! pat.test(prmDate1))  return   false ;   
102       if ( ! pat.test(prmDate2))  return   false ;   
103       if (prmDate1  >  prmDate2)  return   false ;   
104       return   true ;   
105  }   
106  /* *  
107  * 验证两个文本框输入值是否相同(常用于验证密码一致)  
108  */    
109  function  chkPassInput(prmPass1,prmPass2){   
110       if (prmPass1  !=  prmPass2)  return   false    
111       return   true ;   
112  }  

 

 


宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒
目录
相关文章
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
149 19
|
5月前
|
人工智能 Python
083_类_对象_成员方法_method_函数_function_isinstance
本内容主要讲解Python中的数据类型与面向对象基础。回顾了变量类型(如字符串`str`和整型`int`)及其相互转换,探讨了加法在不同类型中的表现。通过超市商品分类比喻,引出“类型”概念,并深入解析类(class)与对象(object)的关系,例如具体橘子是橘子类的实例。还介绍了`isinstance`函数判断类型、`type`与`help`探索类型属性,以及`str`和`int`的不同方法。最终总结类是抽象类型,对象是其实例,不同类型的对象有独特运算和方法,为后续学习埋下伏笔。
111 7
083_类_对象_成员方法_method_函数_function_isinstance
|
5月前
|
Python
[oeasy]python086方法_method_函数_function_区别
本文详细解析了Python中方法(method)与函数(function)的区别。通过回顾列表操作如`append`,以及随机模块的使用,介绍了方法作为类的成员需要通过实例调用的特点。对比内建函数如`print`和`input`,它们无需对象即可直接调用。总结指出方法需基于对象调用且包含`self`参数,而函数独立存在无需`self`。最后提供了学习资源链接,方便进一步探索。
116 17
|
5月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
5月前
|
人工智能 Python
[oeasy]python083_类_对象_成员方法_method_函数_function_isinstance
本文介绍了Python中类、对象、成员方法及函数的概念。通过超市商品分类的例子,形象地解释了“类型”的概念,如整型(int)和字符串(str)是两种不同的数据类型。整型对象支持数字求和,字符串对象支持拼接。使用`isinstance`函数可以判断对象是否属于特定类型,例如判断变量是否为整型。此外,还探讨了面向对象编程(OOP)与面向过程编程的区别,并简要介绍了`type`和`help`函数的用法。最后总结指出,不同类型的对象有不同的运算和方法,如字符串有`find`和`index`方法,而整型没有。更多内容可参考文末提供的蓝桥、GitHub和Gitee链接。
123 11
|
7月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
166 32
|
6月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
10月前
|
中间件 Docker Python
【Azure Function】FTP上传了Python Function文件后,无法在门户页面加载函数的问题
通过FTP上传Python Function至Azure云后,出现函数列表无法加载的问题。经排查,发现是由于`requirements.txt`中的依赖包未被正确安装。解决方法为:在本地安装依赖包到`.python_packages/lib/site-packages`目录,再将该目录内容上传至云上的`wwwroot`目录,并重启应用。最终成功加载函数列表。
113 0