AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

转帖：客户端表单通用验证checkForm(oForm) js版

2019-06-01 1120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： *--------------- 客户端表单通用验证checkForm(oForm) -----------------  * 本程序最初是由wanghr100(灰豆宝宝.net)的checkForm基础上进行修改的，增加了很多功能,如下：  * 1.
 *--------------- 客户端表单通用验证checkForm(oForm) -----------------
 * 本程序最初是由wanghr100(灰豆宝宝.net)的checkForm基础上进行修改的，增加了很多功能,如下：
 * 1.对非ie的支持
 * 2.增加了内置表达式和内置提示
 *  3.增加了显示方式（弹出式和页面显示式）
 * 4.增加了显示一条和显示全部
 * 5.进行了封装（CLASS_CHECK）
 * 6.支持外接函数或表达式（应用在密码一致）
 * 7.简化了调用方式，所有操作只需要<script language='javascript' src='checkform.js'>,
   然后在HTML里定义各标签验证格式
 * 8.对IE增加了对键盘输入的限制（如：定义usage='int'时，输入框只能输入数字（非IE无效）
 * 9.增加了对disabled的不验证
 * 10.自定义报警方式（重写showMessageEx方法）

 *-----------------------------申明信息-----------------------------
 *
 * 作者： ttyp
 * 邮箱： ttyp@21cn.com
 * 博客： http://www.cnblogs.com/ttyp/
 *  声明： 对本程序可以任意复制传播，但请保留这些声明，对于内置的表达式有些没有做到很严格，如果你
   有好的建议和意见，欢迎邮件和我联系或者上我的博客留言

 * 简介：
   本程序只需要对需要验证的标签设置三个属性：usage,exp,tip

   usage : 内置格式或表达式或函数
   exp  : 正则表达式（注意如果指定了usage则忽略exp)
   tip  : 出错提示（如果是内置格式可以不要此属性，有缺省提示）

   调用时只需要引用<script language='javascript' src='checkform.js'>，然后为每个标记
   增加以上3个属性（不一定需要全部）

 * 原作者: wanghr100(灰豆宝宝.net)
 * email: wanghr100@126.com
 *
 *--------------- 客户端表单通用验证checkForm(oForm) -----------------
 */
////////////////////////////////////////////////////////////////////////////////


function CLASS_CHECK()
{
 this.pass  = true;  //是否通过验证
 this.showAll = true;  //是否显示所有的验证错误
 this.alert  = false; //报警方式（默认alert报警）
 this.message = "";  //错误内容
 this.first  = null;  //在显示全部验证错误时的第一个错误控件（用于回到焦点）

 //定义内置格式
 var aUsage =
 {
  "int":"^([+-]?)\\d+$",           //整数
  "int+":"^([+]?)\\d+$",           //正整数
  "int-":"^-\\d+$",            //负整数
  "num":"^([+-]?)\\d*\\.?\\d+$",         //数字
  "num+":"^([+]?)\\d*\\.?\\d+$",         //正数
  "num-":"^-\\d*\\.?\\d+$",          //负数
  "float":"^([+-]?)\\d*\\.\\d+$",         //浮点数
  "float+":"^([+]?)\\d*\\.\\d+$",         //正浮点数
  "float-":"^-\\d*\\.\\d+$",          //负浮点数
                  //邮件
  "email":"^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$", 
  "color":"^#[a-fA-F0-9]{6}",          //颜色
  "url":"^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$", //联接
  "chinese":"^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$",    //仅中文
  "ascii":"^[\\x00-\\xFF]+$",          //仅ACSII字符
  "zipcode":"^\\d{6}$",           //邮编
  "mobile":"^0{0,1}13[0-9]{9}$",         //手机
  "ip4":"^\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}.\\d{1,3}$",    //ip地址
  "notempty":"^\\S+$",           //非空
  "picture":"(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //图片
  "rar":"(.*)\\.(rar|zip|7zip|tgz)$",        //压缩文件
  "date":"^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$"        //日期
 };

 //缺省消息
 var aMessage =
 {
  "int" :"请输入整数",           //整数
  "int+" :"请输入正整数",           //正整数
  "int-" :"请输入负整数",           //负整数
  "num" :"请输入数字",           //数字
  "num+" :"请输入正数",           //正数
  "num-" :"请输入负整数",           //负数
  "float" :"请输入浮点数",           //浮点数
  "float+":"请输入正浮点数",          //正浮点数
  "float-":"请输入负浮点数",          //负浮点数
  "email" :"请输入正确的邮箱地址",         //邮件
  "color" :"请输入正确的颜色",          //颜色
  "url" :"请输入正确的连接地址",         //联接
  "chinese":"请输入中文",           //中文
  "ascii" :"请输入ascii字符",          //仅ACSII字符
  "zipcode":"请输入正确的邮政编码",         //邮编
  "mobile":"请输入正确的手机号码",         //手机
  "ip4" :"请输入正确的IP地址",          //ip地址
  "notempty":"不能为空",           //非空
  "picture":"请选择图片",           //图片
  "rar" :"请输入压缩文件",          //压缩文件
  "date" :"请输入正确的日期"          //日期
 }

 var me = this;

 function checkForm(oForm)
 {
  me.pass  = true;
  me.message = "";
  me.first = null;
  var els = oForm.elements;
  //遍历所有表元素
  for(var i=0;i<els.length;i++)
  {
   //取得格式
   var sUsage = els[i].getAttribute("Usage"); 
   var sReg = "";
   
   //如果设置Usage，则使用内置正则表达式，忽略Exp
   if(typeof(sUsage)!="undefined"&&sUsage!=null)
   {
    //如果Usage在表达室里找到，则使用内置表达式，无则认为是表达式；表达式可以是函数；
    if(aUsage[sUsage]!=null)
    {   
     sReg = aUsage[sUsage];
    }
    else
    {
     try
     {
      if(eval(sUsage)==false)
      { 
       me.pass  = false;
       if(me.first==null)
       {
        me.first = els[i];
       }

       addMessage(getMessage(els[i]));       

       if(me.showAll==false)
       {
        setFocus(els[i]);
        break;
       }
      }
     }
     catch(e)
     {
      alert("表达式[" + sUsage +"]错误:" + e.description)
      return false;
     }
    }
   }
   else
   {   
    sReg = els[i].getAttribute("Exp");
   }

   if(typeof(sReg)!="undefined"&&sReg!=null)
   {
    //对于失效状态不验证
    if(isDisabled(els[i])==true)
    {
     continue;
    }

    //取得表单的值,用通用取值函数
    var sVal = getValue(els[i]);
    //字符串->正则表达式,不区分大小写
    var reg = new RegExp(sReg,"i");
    if(!reg.test(sVal))
    {
     me.pass  = false;
     if(me.first==null)
     {
      me.first = els[i];
     }

     //alert(reg);
     //验证不通过,弹出提示warning
     var sTip = getMessage(els[i]);
     if(sTip.length==0&&typeof(sUsage)!="undefined"&&sUsage!=null&&aMessage[sUsage]!=null)
     {
      sTip = aMessage[sUsage];
     }
     addMessage(sTip);

     if(me.showAll==false)
     {
      //该表单元素取得焦点,用通用返回函数
      setFocus(els[i]);
      break;
     }

    }
   }       
  }

  if(me.pass==false)
  {
   showMessage();

   if(me.first!=null&&me.showAll==true)
   {
    setFocus(me.first);
   }
  }

  return me.pass;
 }

 /*
  * 添加错误信息
  */
 function addMessage(msg)
 {
  if(me.alert==true)
  {
   me.message += msg + "\n";
  }
  else
  {
   me.message += msg + "<br>";
  }
 }

 /*
  * 显示错误
  */
 function getMessage(els)
 {
  var sTip = els.getAttribute("tip");
  if(typeof(sTip)!="undefined"&&sTip!=null)
  {
   return sTip;
  }
  else
  {
   return "";
  }
 }


 /*
  * 显示错误
  */
 function showMessage()
 {
  //外接显示错误函数
  if(typeof(me.showMessageEx)=="function")
  {
   return me.showMessageEx(me.message);
  }

  if(me.alert==true)
  {
   alert(me.message);
  }
  else
  {
   var divTip;
    divTip = document.getElementById("divErrorMessage");
   try
   {
    if(typeof(divTip)=="undefined"||divTip==null)
    {
      divTip = document.createElement("div");
      divTip.id   = "divErrorMessage";
      divTip.name   = "divErrorMessage";
      divTip.style.color = "red";
      document.body.appendChild(divTip);
    }

    divTip.innerHTML = me.message;
   }catch(e){}
  }
 }

 /*
  * 获得元素是否失效（失效的元素不做判断）
  */
 function isDisabled(el)
 {
  //对于radio,checkbox元素，只要其中有一个非失效元素就验证
  if(el.type=="radio"||el.type=="checkbox")
  {
   //取得第一个元素的name,搜索这个元素组
   var tmpels = document.getElementsByName(el.name);
   for(var i=0;i<tmpels.length;i++)
   {
    if(tmpels[i].disabled==false)
    {
     return false;
    }
   }
   return true;
  }
  else
  {
   return el.disabled;
  }
 }


 /*
  * 取得对象的值（对于单选多选框把其选择的个数作为需要验证的值）
  */
 function getValue(el)
 {
  //取得表单元素的类型
  var sType = el.type;
  switch(sType)
  {
   //文本输入框,直接取值el.value
   case "text":
   case "hidden":
   case "password":
   case "file":
   case "textarea": return el.value;
   //单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个，"00"表示选中两个
   case "checkbox":
   case "radio": return getRadioValue(el);
   case "select-one":
   case "select-multiple": return getSelectValue(el);
  }
  //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
  function getRadioValue(el)
  {
   var sValue = "";
   //取得第一个元素的name,搜索这个元素组
   var tmpels = document.getElementsByName(el.name);
   for(var i=0;i<tmpels.length;i++)
   {
    if(tmpels[i].checked)
    {
     sValue += "0";
    }
   }
   return sValue;
  }
  //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
  function getSelectValue(el)
  {
   var sValue = "";
   for(var i=0;i<el.options.length;i++)
   {
    //单选下拉框提示选项设置为value=""
    if(el.options[i].selected && el.options[i].value!="")
    {
     sValue += "0";
    }
   }
   return sValue;
  }
 }

 /*
  * 对没有通过验证的元素设置焦点
  */
 function setFocus(el)
 {
  //取得表单元素的类型
  var sType = el.type;
  switch(sType)
  {
   //文本输入框,光标定位在文本输入框的末尾
   case "text":
   case "hidden":
   case "password":
   case "file":
   case "textarea":
    try{el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();}catch(e){};
    break;
   
   //单多选,第一选项非失效控件取得焦点
   case "checkbox":
   case "radio":
    var els = document.getElementsByName(el.name);
    for(var i=0;i<els.length;i++)
    {
     if(els[i].disabled == false)
     {
      els[i].focus();
      break;
     }
    }
    break;
   case "select-one":
   case "select-multiple":
    el.focus();
    break;
  }
 }

 
 //自动绑定到所有form的onsubmit事件
 if(window.attachEvent)
 {
  window.attachEvent("onload",function(){for(var i=0;i<document.forms.length;i++){var theFrom = document.forms[i]; if(theFrom){theFrom.attachEvent("onsubmit",function(){return checkForm(theFrom);});}}});
 }
 else
 {
  window.onsubmit = function(e){var theFrom = e.target;if(theFrom){return checkForm(theFrom);}}
 }

 this.keyCheck = function()
 {
  if(window.attachEvent)
  {
   window.attachEvent("onload",function(){for(var i=0;i<document.forms.length;i++){var theFrom = document.forms[i]; if(theFrom){myKeyCheck(theFrom);}}});
  }
  else
  {
   //TOOD
  }

  function myKeyCheck(oForm)
  {
   var els = oForm.elements;
   //遍历所有表元素
   for(var i=0;i<els.length;i++)
   {
    //取得格式
    var sUsage = els[i].getAttribute("Usage"); 
    
    //如果设置Usage，则使用内置正则表达式，忽略Exp
    if(typeof(sUsage)!="undefined"&&sUsage!=null)
    {
     switch(sUsage.toLowerCase ())
     {
      case "zipcode":
      case "int":
       els[i].onkeypress = function(){return /\d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('+')<0?String.fromCharCode(event.keyCode)=="+":false)||(this.value.indexOf('-')<0?String.fromCharCode(event.keyCode)=="-":false);}
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "mobile":
      case "int+":
       els[i].onkeypress = function(){return /\d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('+')<0?String.fromCharCode(event.keyCode)=="+":false);}
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "int-":
       els[i].onkeypress = function(){return /\d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('-')<0?String.fromCharCode(event.keyCode)=="-":false);}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "float":
      case "num":
       els[i].onkeypress = function(){return /[\+\-\.]|\d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "float+":
      case "num+":
       els[i].onkeypress = function(){return /[\+\.]|\d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "float-":
      case "num-":
       els[i].onkeypress = function(){return /[\-\.]|\d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "ascii":
       els[i].style.imeMode= "disabled";
       break;
      case "ip4":
       els[i].onkeypress = function(){return /[\.]|\d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       els[i].maxLength = 15;
       break;
      case "color":
       els[i].onkeypress = function(){return /[a-fA-Z]|\d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('#')<0?String.fromCharCode(event.keyCode)=="#":false);}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].maxLength = 7;
       els[i].style.imeMode= "disabled";
       break;
      case "date":
       els[i].onkeypress = function(){return /[\/\-\.]|\d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(/\D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;       
     }
    }
   }
  }
 }
}

//初始化
var g_check = new CLASS_CHECK();
 g_check.keyCheck();

文章标签：
JavaScript
关键词：
JavaScript表单
JavaScript验证
JavaScript客户端
表单JavaScript
JavaScript通用
金色海洋
目录
相关文章
算精通
|
1月前
|
移动开发 JavaScript 前端开发
JavaScript：验证输入
【9月更文挑战第02天】
算精通
35 6
白雾茫茫丶
|
23天前
Nest.js 实战 (十三)：实现 SSE 服务端主动向客户端推送消息
这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下，为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念，并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例，并以一个效果演示结束，总结SSE在Nest.js中的应用。
白雾茫茫丶
37 1
Nest.js 实战 (十三)：实现 SSE 服务端主动向客户端推送消息
游客j4mujezz7vm7y
|
7天前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
游客j4mujezz7vm7y
24 1
cqtianxin1
|
16天前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
cqtianxin1
24 9
cqtianxin1
|
15天前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
cqtianxin1
18 2
游客zi3qmblbcdexu
|
20天前
|
人工智能 前端开发 JavaScript
react js 处理表单（ form ）的2个例子
react js 处理表单（ form ）的2个例子
游客zi3qmblbcdexu
31 0
土木林森
|
2月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖！看前端框架如何挑战数据处理极限？揭秘这场技术与勇气的较量！
【8月更文挑战第31天】在信息爆炸时代，大数据已成为企业和政府决策的关键。JavaServer Faces（JSF）作为标准的 Java Web 框架，如何与大数据技术结合，高效处理大规模数据集？本文探讨大数据的挑战与机遇，介绍 JSF 与 Hadoop、Apache Spark 等技术的融合，展示其实现高效数据存储和处理的潜力，并提供示例代码，助您构建强大的大数据系统。
土木林森
31 0
土木林森
|
2月前
|
Devops 持续交付 测试技术
JSF遇上DevOps：开发流程将迎巨变？一篇文章带你领略高效协同的魅力！
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces（JSF）开发中融入DevOps文化，通过持续集成与部署、自动化测试、监控与日志记录及反馈机制，提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法，并强调了持续改进的重要性。
土木林森
30 0
土木林森
|
2月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新：如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起，企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用，通过RESTful服务实现前后端分离，提升灵活性和适应性。
土木林森
45 0
土木林森
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘！v-model 与自定义验证综合运用，打造高效表单处理体验！
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架，其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定，简化表单元素值与 Vue 实例数据的同步过程；结合自定义验证规则，则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证，Vue.js 均提供了简洁有效的解决方案，有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证，开发者能够实时反馈错误信息并控制表单状态，从而增强应用的交互性与可靠性。
土木林森
31 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    JS判断文件扩展名
  • 3
    如何添加360浏览器（chrome）添加JavaScript例外，禁止网站加载JS
  • 4
    Kotlin 扩展函数 与 JS 的 prototype
  • 5
    超棒的纯Javascript实现的文件上传功能 - Fine uploader
  • 6
    asp.net常用javascript封装代码
  • 7
    Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
  • 8
    JavaScript学习（十四）---String对象中的模式匹配方法
  • 9
    在javascript里 string 和 int 类型转换
  • 10
    在Ubuntu上安装Node.js的Upstream版本
  • 1
    JS+CSS3点击粒子烟花动画js特效
    43
  • 2
    JavaScript字符串检查：从基础到高级
    54
  • 3
    使用 JavaScript 获取 URL 参数的详细指南
    6860
  • 4
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    193
  • 5
    Java Script 中的垃圾回收机制有哪些缺点
    52
  • 6
    描述 JavaScript 中的垃圾回收机制。
    54
  • 7
    如何使用 JavaScript 操作 DOM？
    52
  • 8
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    48
  • 9
    JavaScript 中的数组方法有哪些？
    44
  • 10
    JS设置日期为0时0分0秒
    191

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    无影云桌面