JavaScript通用表单验证函数
表单定义:
< 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 >
JavaScript通用表单验证函数相关推荐
- JavaScript - JavaScript通用表单验证函数(实例)
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. ...
- 表单验证-通用表单验证大全/通用表单验证函数收集
表单验证-通用表单验证大全/通用表单验证函数收集_Web设计论坛 文章来源:IT人才网(http://www.ad0.cn) Javascript表单验证函数大全: 复制内容到剪贴板代码: <s ...
- JS通用表单验证函数
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素 ...
- 通用客户端表单验证函数修正版
转载:PHPSOHO 通用客户端表单验证函数修正版 主要内容: 一.用法简介: 二.类型定义: 三.程序文件: 历史: 2005.2.25 修改为通用客户端表单验证函数修正版 2004.12.21 ...
- 通用客户端表单验证函数修正版(zz)
通用客户端表单验证函数修正版 主要内容: 一.用法简介: 二.类型定义: 三.程序文件: 历史: 2005.2.25 修改为通用客户端表单验证函数修正版 2004.12.21 1.对整数的范 ...
- JavaScript常用表单验证
JavaScript常用表单验证 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判 ...
- (Ajax)表单验证 函数包http://hi.baidu.com/zeronet/blog/item/e8809654e112431e3b293569.html
2007年05月21日 星期一 19:37 /***************************************************************************** ...
- 第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"><h2 class= ...
- JavaScript 正则表达式表单验证
案例:表单验证 Html <body onload="loading()"><h1>欢迎来到***注册页面</h1><form onsub ...
最新文章
- Apache ServiceComb — Overview
- python语言程序设计基础答案第四章_《Python语言程序设计基础》第四章笔记
- python获取输入数字_python获取从命令行输入数字的方法
- 文巾解题 5. 最长回文子串
- php5.3二进制包,php使用pack处理二进制文件的方法
- [OS复习]存储管理1
- 调用系统相机和相册,并且裁剪成圆形图片(解决6.0,7.0,8.0版本问题)
- 关于在Flask中使用Restful
- 如何摆脱「自我否定」状态
- P7137-[THUPC2021 初赛]切切糕【dp】
- LeetCode 986. 区间列表的交集
- 前端做聊天软件的功能难点
- 20160417_无为_常州
- eas库存状态调整单不能反审核_把握 商品 周转,做好 动态 库存 管理
- Linux编写带缓存的程序,Video4linux2应用程序编写
- 万稞pw80线切割编程软件_模具设计编程培训哪些内容?
- 【雷达与对抗】【2014】MIMO雷达中的波束形成研究
- 无限分类---重新排序+生成树型
- 【智能制造】歌尔股份打造面向可重构和微服务的可穿戴产品智慧工厂
- landesk 卸载_LANDesk软件分发在项目中的深入探索(续2)—客户端已安装应用程序的远程卸载...
热门文章
- CF914E Palindromes in a Tree
- POJ1077 Eight —— 反向BFS
- Spring/SpringMVC在启动完成后执行方法
- 《TCP/IP详解》读书笔记
- TCP UDP IP
- 整合ssh model $$_javassist_13 cannot be cast to javassist.util.proxy.Proxy
- ubuntu man命令彩色高亮显示
- ApacheCN Asp.NET 译文集 20211126 更新
- django 1.8 官方文档翻译:7-2 管理操作
- 【Python】line.strip().split(‘,‘)含义