通用表单验证函数

最新推荐文章于 2023-10-19 23:28:30 发布
最新推荐文章于 2023-10-19 23:28:30 发布
阅读量728 收藏
点赞数
分类专栏： 验证方法收集 文章标签： function null input string date float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiemails/article/details/133340
版权
 

客户端表单验证

表单定义:
<form name="form1" action="" style="behavior:url('form.htc')"></form>
客户端表单验证是由表单的onSubmit事件触发，由于表单的onSubmit事件只能由提交按钮触发,
所以如果要用函数提交表单form1.submit(),则必须同时执行form1.onSubmit()。

类型定义:

一、整型(int)
定义:
  valueType="int"
属性:
  objName   对象名称(字符串)
  mustInput 必输项(true/false)
  minInput  最小值(数字)
  maxInput  最大值(数字)
举例:
  <input type="text" name="test" valueType="int" objName="总载重吨" mustInput="true" maxInput="10000">

二、浮点型(float)
定义:
  valueType="float"
属性:
  objName   对象名称(字符串)
  mustInput 必输项(true/false)
  minInput  最小值(数字)
  maxInput  最大值(数字)
  decimalLen小数位数(数字)
举例:
  <input type="text" name="test" valueType="float" objName="运价" mustInput="true" maxInput="10000.50" decimalLen="2">

三、字符串(string)
定义:
  valueType="string"
属性:
  objName   对象名称(字符串)
  mustInput 必输项(true/false)
  stringLen 字符串长度(数字)
举例:
  <input type="text" name="test" valueType="string" objName="英文船名" mustInput="true" stringLen="100">

四、日期(date)
定义:
  valueType="date"
属性:
  objName   对象名称(字符串)
  mustInput 必输项(true/false)
举例:
  <input type="text" name="test" valueType="date" objName="开始日期" mustInput="true">
备注:
  日期现在只能校验的格式为(yyyy-mm-dd)

五、邮箱(email)
定义:
  valueType="email"
属性:
  objName   对象名称(字符串)
  mustInput 必输项(true/false)
举例:
  <input type="text" name="test" valueType="email" objName="邮箱" mustInput="true">

六、单选(radio)
定义:
  valueType="radio"
属性:
  objName   对象名称(字符串)
  mustSelect 必输项(true/false)
举例:
  <input type="radio" name="test" valueType="radio" objName="租船方式" mustSelect="true">
备注:
  对于同一组单选按钮，只需要定义第一个即可。

七、复选(checkbox)
定义:
  valueType="checkbox"
属性:
  objName   对象名称(字符串)
  minSelect 最小选择数(数字)
  maxSelect 最大选择数(数字)
举例:
  <input type="checkbox" name="test" valueType="checkbox" objName="爱好" minSelect="2" maxSelect="5">
备注:
  对于同一组复选按钮，只需要定义第一个即可。

八、下拉列表框(select)
定义:
  valueType="select"
属性:
  objName   对象名称(字符串)
  mustSelect 必输项(true/false)
举例:
  <select name="test" valueType="select" objName="租船方式" mustSelect="true">

九、列表框(list)
定义:
  valueType="list"
属性:
  objName   对象名称(字符串)
  minSelect 最小选择数(数字)
  maxSelect 最大选择数(数字)
举例:
  <select name="test" valueType="list" objName="爱好" minSelect="2" maxSelect="5">

 

 

/

<!-- ---------------------------------------------------------------------
//
//  File:  form.htc
//  version:    1.0
//  Description:客户端表单验证.
//  author:     伍子
//
//-------------------------------------------------------------------- -->
<PUBLIC:COMPONENT id="formCheck" urn="wwb:formCheck">
<PUBLIC:ATTACH EVENT="onsubmit" ONEVENT="checkForm()"/>
<script language="JavaScript">
function checkForm()
{
    var oForm=event.srcElement;
 var eles = oForm.elements;
    //遍历所有表元素
 for(var i=0;i<eles.length;i++)
    {
        //是否需要验证
        var sType=eles[i].valueType;
  if(sType)
        {
   if(eles[i].mustInput!=null && eles[i].mustInput)
   {
    if(trim(eles[i].value)=="")
    {
     if(eles[i].objName!=null)
     {
      alert(eles[i].objName+"不可以为空");
     }
     else
     {
      alert("该文本框为必输字段");
     }
     eles[i].focus();    
     event.returnValue=false;    
     return false;  
    }
   } 
   switch(sType)
   {
                //整数
    case "int":
     if(!checkInt(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //小数
    case "float":
     if(!checkFloat(eles[i]))
     { 
      event.returnValue=false;
      return false;
     }
     break;
    //字符串
    case "string":
     if(!checkString(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //日期
    case "date":
     if(!checkDate(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //邮件
    case "email":
     if(!checkEmail(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //单选按钮
    case "radio":
     if(!checkRadio(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //复选按钮
    case "checkbox":
     if(!checkBox(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //下拉列表框
    case "select":
     if(!checkSelect(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
    //列表框
    case "list":
     if(!checkList(eles[i]))
     {
      event.returnValue=false;
      return false;
     }
     break;
            }
        }
    }
 event.returnValue=true;
 return true;
}

/***检查是否为整数***/
function checkInt(ele)
{
 if(!isInt(ele.value))
 {
  alert("请输入有效整数");
  ele.focus();
  return false;
 }
 else
 {
  if(ele.maxInput!=null && !isNaN(ele.maxInput))
   if(parseInt(ele.maxInput)<parseInt(ele.value))
   {
    alert("您输入的"+ convertNullToSpace(ele.objName)+"值应该小于"+ele.maxInput);       
    ele.focus();
    return false;
   }     
  if(ele.minInput!=null && !isNaN(ele.minInput))
   if(parseInt(ele.minInput)>parseInt(ele.value))
   {
    alert("您输入的"+ convertNullToSpace(ele.objName)+"值应该大于"+ele.minInput);
    ele.focus();
    return false;
   }  
 }
 return true;
}

/***检查是否为小数***/
function checkFloat(ele)
{
    if(isNaN(ele.value))
    {
  alert("请输入有效数字");
  ele.focus();
  return false;
    }
 else
 {
        if(ele.decimalLen!=null && !checkDecimal(ele.value,ele.decimalLen))
     {
   alert("您输入的"+convertNullToSpace(ele.objName)+"值小数位最多为"+ele.decimalLen);
   ele.focus();    
   return false;
        }
  if(ele.maxInput!=null && !isNaN(ele.maxInput))
   if(parseInt(ele.maxInput)<parseInt(ele.value))
   {
    alert("您输入的"+ convertNullToSpace(ele.objName)+"值应该小于"+ele.maxInput);         
    ele.focus();
    return false;
   }     
  if(ele.minInput!=null && !isNaN(ele.minInput))
   if(parseInt(ele.minInput)>parseInt(ele.value))
   {
    alert("您输入的"+ convertNullToSpace(ele.objName)+"值应该大于"+ele.minInput);
    ele.focus();
    return false;
   }  
 }
 return true;
}

/***检查是否为字符串***/
function checkString(ele)
{
 if(ele.stringLen!=null && !isNaN(ele.stringLen))
 {
  var value=new String(ele.value);
  if(value.length>parseInt(ele.stringLen))
  {
   alert("您输入的"+convertNullToSpace(ele.objName)+"最大长度为"+ele.stringLen);
   ele.focus();    
   return false;
  }
 }
 return true;
}
/***检查是否为日期格式***/
function checkDate(ele)
{
 if(!isDate(ele.value))
 {
  alert("请输入有效日期(yyyy-mm-dd)");
  ele.focus();
  return false;
    }
 return true;
}

/***检查是否为电子邮箱***/
function checkEmail(ele)
{
 if(!isEmail(ele.value))
 {
  alert("请输入有效邮箱");
  ele.focus();
  return false;
    }
 return true;
}
/***检查单选按钮是否需要选择***/
function checkRadio(ele)
{
 //var rads = document.getElementsByName(ele.name);
    eval("var rads="+name+"."+ele.name);
 var selectCount=0;
 for(var i=0;i<rads.length;i++)
    {
  if(rads[i].checked)
        {
   selectCount++;
        }
    }
 
 if(ele.mustSelect!=null && ele.mustSelect)
 {
  if(selectCount==0)
  {
   alert("请选择"+convertNullToSpace(ele.objName));
   ele.focus();    
   return false;
  }
 }
 return true;
}
/***检查复选按钮是否需要选择***/
function checkBox(ele)
{
 //var rads = document.getElementsByName(ele.name);
    eval("var chks="+name+"."+ele.name);
 var selectCount=0;
 for(var i=0;i<chks.length;i++)
    {
  if(chks[i].checked)
        {
   selectCount++;
        }
    }
 if(ele.minSelect!=null && !isNaN(ele.minSelect))
 {
  if(selectCount<parseInt(ele.minSelect))
  {
   alert(convertNullToSpace(ele.objName)+"至少选择"+ele.minSelect+"项");
   ele.focus();    
   return false;
  }
 }
 if(ele.maxSelect!=null && !isNaN(ele.maxSelect))
 {
  if(selectCount>parseInt(ele.maxSelect))
  {
   alert(convertNullToSpace(ele.objName)+"至多选择"+ele.maxSelect+"项");
   ele.focus();    
   return false;
  }
 }
 return true;
}
/***检查下拉列表框是否需要选择***/
function checkSelect(ele)
{
 //var rads = document.getElementsByName(ele.name);
 if(ele.mustSelect!=null && ele.mustSelect)
 {
  if(ele.selectedIndex==0)
  {
   alert("请选择"+convertNullToSpace(ele.objName));
   ele.focus();    
   return false;
  }
 }
 return true;
}
/***检查列表框的选择项数***/
function checkList(ele)
{
 //var rads = document.getElementsByName(ele.name);
    var selectCount=0;
 for(var i=0;i<ele.options.length;i++)
    {
        if(ele.options[i].selected)
        {
            selectCount++;
        }
    }
 alert(selectCount);
 if(ele.minSelect!=null && !isNaN(ele.minSelect))
 {
  if(selectCount<parseInt(ele.minSelect))
  {
   alert(convertNullToSpace(ele.objName)+"至少选择"+ele.minSelect+"项");
   ele.focus();    
   return false;
  }
 }
 if(ele.maxSelect!=null && !isNaN(ele.maxSelect))
 {
  if(selectCount>parseInt(ele.maxSelect))
  {
   alert(convertNullToSpace(ele.objName)+"至多选择"+ele.maxSelect+"项");
   ele.focus();    
   return false;
  }
 }
 return true;
}
/***判断是否为整数***/
function isInt(s)
{
 var patrn=/^[-,+]{0,1}[0-9]{0,}$/;
 if (!patrn.exec(s))
   return false;
 return true;
}
/***判断是否为数字***/
function isNumber(s)
{
 var patrn=/^[-,+]{0,1}[0-9]{0,}[.]{0,1}[0-9]{0,}$/;
 if (!patrn.exec(s))
   return false;
 return true;
}
/***判断是否为日期***/
function isDate(str)
{
 var r = str.match(/^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2})$/);
 if(r==null)
 {
  return false;
 }
 var d= new Date(r[1], r[3]-1, r[4]);
 if(!(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]))
 { 
  return false;
 }
 return true;
}
/***判断是否为邮箱***/
function isEmail(str)
{
 if(str.match(/[/w-]+@{1}[/w-]+/.{1}/w{2,4}(/.{0,1}/w{2}){0,1}/ig)!=str)
  return false;
 else
  return true;
}
/***将NULL转化为空格，用于显示对象名称***/
function convertNullToSpace(paramValue)
{
  if(paramValue==null)
    return "";
  else
    return paramValue;
}
/***检查小数位数***/
function checkDecimal(num,decimalLen)
{
  var len = decimalLen*1+1;
  if(num.indexOf('.')>0)
  {
    num=num.substr(num.indexOf('.')+1,num.length-1);  
    if ((num.length)<len)
 {
      return true;
    }
 else
 {
      return false;
    }
  }
  return true;
}
/***去除空格***/
function trim(str)
{
 if (str.length > 0)
 {
  while ((str.substring(0,1) == " ") && (str.length > 0))
  {
   str = str.substring(1,str.length);
  }
  while (str.substring(str.length-1,str.length) == " ")
  {
   str = str.substring(0,str.length-1);
  }
 }
 return str;
}
</script>
</PUBLIC:COMPONENT>

谢谢2014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS通用表单验证函数
swallow的专栏
04-10 3553
Check.js   JS函数文件/////////////////////////////////////////////////////////////////////////////////* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. * 使用: *     *     *  
JS通用表单验证函数1
05-24
"JS通用表单验证函数1"是一个针对这一需求的解决方案，它提供了一种灵活且可复用的方法来验证不同类型的表单字段。 该资源可能包含一个或多个JavaScript函数，用于验证不同类型的数据，如数字、电子邮件、电话号码...
表单 验证 函数
weixin_34376986的博客
10-17 174
（验证）html 示意代码 <div class="form-warper dataForm"> <dd class="form-group"> <label class="control-label">设备编码：</label> <input cl...
javascript实现通用表单验证函数
02-17 1308
javascript实现通用表单验证函数                                                                           (转 邢红瑞）不管是动态网站,还是其它B/S结构的系统,都离不开表单表单做为客户端向服务器提交数据的载体担当相当重要的角色.这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据保证所
完美JavaScript通用表单验证函数
01-12
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
Vue快速实现通用表单验证的方法
10-15
总之，Vue.js 提供了灵活的机制来实现表单验证，通过结合数据绑定、事件处理以及自定义验证规则，可以快速构建出满足需求的通用表单验证方案。在前后端分离的项目中，前端负责更多的业务逻辑和用户体验，因此掌握...
通用的JS表单验证
03-22
"通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则，从而提高数据质量和用户体验。下面我们将深入探讨这个话题。 首先，表单验证是网页开发中的关键部分，它能...
Js 表单提交验证函数（很全了）
06-24
Js 表单提交验证函数，网上表单验证函数。已经比较全了。
【Java 进阶篇】JavaScript 表单验证详解
最新发布
繁依Fanyi的博客
10-19 705
在上面的示例中，我们使用alert函数来显示验证错误消息。然而，这并不是最好的用户体验，通常我们会希望将错误消息直接显示在页面上，以便用户更容易理解。为此，您可以使用 HTML 元素来显示错误消息，并根据验证结果显示或隐藏它们。
常用表单验证函数
訫誶
04-05 178
******函数说明****** * * isEmail(emailStr) //邮件校验,通过校验返回ture,否则返回false * isIp(strIp) //IP地址校验,输入正确的IP地址返回ture,否则返回false * isTelphoneNum(telNum) //电话号码校验,正确的电话号码（如0571-1234567[8] 010-1234567[8] ）则返...
调用一些表单验证函数主要用到blur()
sixteen_cicle的博客
12-07 1468
keyup，focusin，change等事件 //表单输入及时验证          /* console.log($('input[name="partnername"]').val()); */                  $('#partnername').blur(function(){             checkChinese($('#partnerna
[无心插柳]简单实现常用的表单校验函数
weixin_33877885的博客
11-12 315
有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧 1.前言 表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形，算是无心插柳吧。现在也该分享出来了，和大家交流交流。函数比较粗糙，如果大家有建议，评论留言...
第一个js函数——表单验证提示
m_ying的博客
09-06 551
昨天尝试对着课本敲了一下自己学习的第一个js脚本，不多说，今天重新默着敲一遍，并记录哪些不理解。 &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;HTML表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp
js表单验证
08-20 187
 //去左空格;function ltrim(s){    return s.replace( /^//s*/, "");}//去右空格;function rtrim(s){    return s.replace( ///s*$/, "");}//去左右空格;function trim(s){    return rtrim(ltrim(s));}//是否为空值;function IsEmpty
js中form表单的简单封装
mischen520的博客
07-12 1668
js中form表单的简单封装 HTML代码： //验证用户名 function valiUname(unameObj){ var val=unameObj.value; var reg=new RegExp("^\\w{6,12}$"); var
JavaScript表单验证全攻略：常用规则与函数实现
在本文档中，我们将深入探讨JavaScript表单验证的各个方面，确保用户提交的数据符合预期格式和规则。以下是主要内容的详细解读： 1. **JavaScript字符串长度限制**：通过`test()`函数，我们学习如何限制用户输入的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值