JS通用表单验证函数

Check.js JS函数文件

/*
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
* 功能:通用验证所有的表单元素.
* 使用:
*    <form name="form1" οnsubmit="return CheckForm(this)">
*    <input type="text" name="id" check="^/S+$" warning="id不能为空,且不能含有空格">
*    <input type="submit">
*    </form>
* author:wanghr100(灰豆宝宝.net)
* email:wanghr100@126.com
* update:19:28 2004-8-23
* 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.
* 已实现功能:
* 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
* 待实现功能:把正则表式写成个库.
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
*/

//主函数
function CheckForm(oForm)
{
    var els = oForm.elements;
    //遍历所有表元素
    for(var i=0;i<els.length;i++)
    {
        //是否需要验证
        if(els[i].check)
        {
            //取得验证的正则字符串
            var sReg = els[i].check;
            //取得表单的值,用通用取值函数
            var sVal = GetValue(els[i]);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg,"i");
            if(!reg.test(sVal))
            {
                //验证不通过,弹出提示warning
                alert(els[i].warning);
                //该表单元素取得焦点,用通用返回函数
                GoBack(els[i])
                return false;
            }
        }
    }
}

//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": return el.value;
        case "checkbox":
        case "radio": return GetValueChoose(el);
        case "select-one":
        case "select-multiple": return GetValueSel(el);
    }
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueChoose(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 GetValueSel(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 GoBack(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();
        case "checkbox":
        case "radio": var els = document.getElementsByName(el.name);els[0].focus();
        case "select-one":
        case "select-multiple":el.focus();
    }
}

demo.htm 演示文件

不管是动态网站,还是其它B/S结构的系统,都离不开表单
表单做为客户端向服务器提交数据的载体担当相当重要的角色.
这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据
保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个
项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...

本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.

个人以为表单的验证应该包含两部分:
第一,判断用户输入的数据是否合法.
第二,提示用户你的数据为什么是不合法的.

所以,我们的通用表单验证函数要实现的功能就是:
第一,取得用户输入的数据GetValue(el)
第二,验证用户的数据CheckForm(oForm)
IE支持自定义属性,这就是这个通用函数实现的基础
我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.
check属性:该属性用于存储数据合法性的正则表达式.
warning属性:该性性用于存储出错误提示信息.
第三,返回有误的表单提示GoBack(el)
这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)
搞错了就全功尽弃了 :)
<form οnsubmit="return CheckForm(this)">

写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.
我们要做的就是写好正则表达式!

接下来我们来分析一下所有的表单元素
按其共性,我们将它们分为三类
每类表单的特点不一样,我们的目标就是写出通用的.

1.文输入框Text
<input type="text" name="txt">
<input type="password" name="pwd">
<input type="hidden" name="hid">
<input type="file" name="myfile">
<textarea name="txts"></textarea>
2.单多选框Choose
<input type="checkbox" name="c">
<input type="checkbox" name="c">
<input type="radio" name="r">
<input type="radio" name="r">
3.单多下拉菜单Select
<select name="sel"></select>
<select name="sels" multiple></select>

讲了一堆"大道理"太抽象了,代码更有说服力!
附:
　　Microsoft Windows脚本技术,这里有正则表达式的介绍
　　http://www.dqcn.net/net/CSDN/Book/SCRIPT56.chm
　　一个很不错的正则表达式网站,里面收集了很多的正则表达式.直接拿来主义吧.
　　http://www.regexlib.com/Default.aspx

原作者已做了大量的基础工作，提供了js文件下载（真是好人！），只是有几点不足之处：

1、页面的验证check，只能输入实际的正则表达式。而正则表达式不是一件容易记忆的东东。

2、有些验证的规则，是单纯的正则表达式所不能搞定的，需要引入普通的验证function。

3、对输入项，有时一个验证规则难以满足需要，需要多个规则叠加。

4、 warning太繁，显得罗嗦。

5、只适用检查整个form的所有属性验证，未提供针对某一个属性进行验证。

6、没有“是否必填”的属性。

针对以上，做了如下改进：

1、在JS文件中就某些通用规则设定公共验证函数（提供的验证规则函数在后文中列出），在表单中只需给check设定相应的验证类型，通过使用eval()动态执行函数。

2、在JS文件中规则函数的设定，有两种方式,说明如下：

a、正则表达式的验证方式，返回数组rt，rt[0]为对应的正则表达式，rt[1]为对应要警告的语句.

b、普通的判断function，返回false或true，函数体中通过this.value和this.showName获取页面数据，自行判定value的合法性.

3、可给check设置多个规则，各个规则之间使用";"隔开，如"不能含有空格，且字数不能超过10",设置"notBlank;isString('#',10)".

4、页面中，简单设置showName属性值即可。

5、提供checkElement(id,func)函数，检查某个元素是否匹配。

6、提供“required”的属性设置。

IE(别的浏览器呢?)支持自定义属性，设定required/showName/check三个属性，当设定这些属性，对象必需有对应的name属性：

属性名	是否必填	说明
required	否	“true”或者“yes”为必填写
showName	否	要显示的对象描述建议设置，方便对用户提示
check	否	验证的规则函数设定： 1、对于不带参数的规则，可直接设置规则名，如notBlank或者notBlank(). 2、对于带参数的规则，需要设置对应的规则参数，如isDate('YYYY-MM-DD'). 3、对于本JS文件未提供的类型判定，可自行设置正则表达式验证，如验证三到五位的字符，设置reg('^//S{3,5}$') . 4、可给check设置多个规则，各个规则之间使用";"隔开，如"不能含有空格，且字数不能超过10",设置"notBlank;isString('#',10)".

JS文件的函数说明如下：

一、工具function

函数	输入参数	返回值	说明
CheckForm	oForm：页面FORM	boolean	form验证的主函数
validate	ele： form中某个元素	boolean	CheckForm的辅助函数，不要直接调用
GetValue	ele： form中某个元素	string	通用的获取某个element的值
GoBack	ele： form中某个元素	void	焦点定位
executeFunc	name：函数名字符串	string	使用eval()动态执行函数
trim	value	string	使用正则表达式，去除首尾空格
regValidate	value：要验证值 sReg：正则表达式	boolean	判定某个值与正则表达式是否相符
checkValue	value：要验证值 func：规则函数	boolean	判定某个数值与某个验证函数是否相符验证函数的写法同上文check属性
checkElement	id：元素的ID func：规则函数 showName：要alert的显示名，如不设，不alert	boolean	检查某个元素与某个验证函数是否相符,需要传入元素的ID
checkSelectByName	name：元素name num：至少选择的个数 showName：要alert的显示名，如不设，不alert	boolean	检查某个对象(checkbox/select-multiple)至少选择个数,需要传入元素的NAME
elementValue	id：元素ID	string	获取某元素的值
log	v：调试信息	void	一个javascript调试工具: log4js 调用log函数后，按F1就能看到效果了 (呵呵，这个是从网上看到的，不记得出处了，象原作者表示感谢)

二、规则验证函数

函数有两大类，一类是正则表达式(A)，一类是普通的javascript验证函数(B)。

给出了一些常用的规则函数验证，需要根据实际不断增加.

函数	类型	输入参数	返回值	说明
reg	A	sReg 正则表达式字符串	数组rt，rt[0]为对应的正则表达式，rt[1]为对应要警告的语句 A类的返回值	匹配自行定义的正则表达式
notBlank	A			不能为空,且不能含有空格
required	A			必需填写，不能为空
isDate	A	fmt 格式 yyyy-mm-dd yyyy/mm/dd yyyy.mm.dd yyyymmdd		日期格式判断只使用正则表达式匹配格式待完善：月份和日期是否合理
isString	A	min 个数最小值 max 个数最大值 ‘#’ 表示任意		字符串判定有如下几种设定方式： isString 任意字符串 isString(‘#’, ‘#’) 任意字符串 isString(4) 4位字符串 isString(4,8) 4到8位字符 isString(‘#’,4) 最多4位字符 isString(4, ‘#’) 最少4位字符
strStartsWith	B	str 开头的字符	如否，返回false 否则，返回true或者void B类的返回值	字符串是否以“str”开头
isContains	B	str 包含的字符		字符串是否包含“str”
strEndsWith	B	str 结束的字符		字符串是否以“str”结束
isEmail	A			是否E-AMIL
onlyZh	A			只包含中文
onlyEn	A			只包含英文
enOrNum	A			只包含英文和数字
isInt	A	type 整数的类型为空任意整数 '0+' 非负整数 '+' 正整数 '-0' 非正整数 '-' 负整数		整数的判定如isInt(‘0+’)，只能是非负整数
isFloat	A	type浮点数的类型为空任意浮点数 '0+' 非负浮点数 '+' 正浮点数 '-0' 非正浮点数 '-' 负浮点数		浮点数的判定如isFloat(‘0+’)，只能是非负浮点数
setNumber	B	min最小值 max最大值 ‘#’ 表示任意		数字大小判定有如下几种设定方式： setNumber 任意数字 setNumber(‘#’, ‘#’) 任意数字 setNumber(4) 必需是4 setNumber(4,8) 4到8之间 setNumber(‘#’,4) 不大于4 setNumber(4, ‘#’) 不小于4
isPhone	A			电话号码判定
isMobile	A			手机号码判定
isUrl	A			URL判定必须以http(s)://开头
isZip	A			邮政编码
select	A	num 必需选择的最少个数		目标是否要选择用于select-multiple/checkbox
。。。。。TODO 自行根据业务需要添加

如何使用呢?

前提是引入Check.js文件: <script language="JavaScript" src="Check.js"></script>

一、验证整个form

</form>

二、单独验证某个元素的合法性

//user为对象id

if(!checkElement("user","isString(6,10)")){

alert("非法用户帐号，6到10位数！");

}

</script>

三、特殊的用法，检验checkbox和select-multiple至少要选择的项数

//userId为对象name

if(!checkSelectByName ("userId",1)){

alert("至少要选择一个用户！");

}

</script>

JS通用表单验证函数相关推荐

JavaScript - JavaScript通用表单验证函数(实例)
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. ...
表单验证-通用表单验证大全/通用表单验证函数收集
表单验证-通用表单验证大全/通用表单验证函数收集_Web设计论坛文章来源:IT人才网(http://www.ad0.cn) Javascript表单验证函数大全: 复制内容到剪贴板代码: <s ...
JavaScript通用表单验证函数
表单定义: < form name = " form1 " action = "" style = " behavior:url('form ...
通用客户端表单验证函数修正版
转载:PHPSOHO 通用客户端表单验证函数修正版主要内容: 一.用法简介: 二.类型定义: 三.程序文件: 历史: 2005.2.25 修改为通用客户端表单验证函数修正版 2004.12.21 ...
通用客户端表单验证函数修正版(zz)
通用客户端表单验证函数修正版主要内容: 一.用法简介: 二.类型定义: 三.程序文件: 历史: 2005.2.25 修改为通用客户端表单验证函数修正版 2004.12.21 1.对整数的范 ...
(Ajax)表单验证函数包http://hi.baidu.com/zeronet/blog/item/e8809654e112431e3b293569.html
2007年05月21日星期一 19:37 /***************************************************************************** ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
js——form表单验证
用js实现一个简易的表单验证效果: 代码: <html><head><title>js校验form表单</title><meta charset ...

JS通用表单验证函数

JS通用表单验证函数相关推荐

最新文章

热门文章