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  演示文件

<script language="JavaScript" src="Check.js"></script>
通用表单函数测试:
<form name="form1" οnsubmit="return CheckForm(this)">
test:<input type="text" name="test">不验证<br>
账号:<input type="text" check="^/S+$" warning="账号不能为空,且不能含有空格" name="id">不能为空<br>
密码:<input type="password" check="/S{6,}" warning="密码六位以上" name="id">六位以上<br>
电话:<input type="text" check="^/d+$" warning="电话号码含有非法字符" name="number" value=""><br>
相片上传:<input type="file" check="(.*)(/.jpg|/.bmp)$" warning="相片应该为JPG,BMP格式的" name="pic" value="1"><br>
出生日期:<input type="text" check="^/d{4}/-/d{1,2}-/d{1,2}$" warning="日期格式2004-08-10"  name="dt" value="">日期格式2004-08-10<br>
省份:
<select name="sel" check="^0$" warning="请选择所在省份">
<option value="">请选择
<option value="1">福建省
<option value="2">湖北省
</select>
<br>
选择你喜欢的运动:<br>
游泳<input type="checkbox" name="c" check="^0{2,}$" warning="请选择2项或以上">
篮球<input type="checkbox" name="c">
足球<input type="checkbox" name="c">
排球<input type="checkbox" name="c">
<br>
你的学历:
大学<input type="radio" name="r" check="^0$" warning="请选择一项学历">
中学<input type="radio" name="r">
小学<input type="radio" name="r">
<br>
个人介绍:
<textarea name="txts" check="^[/s|/S]{20,}$" warning="个人介绍不能为空,且不少于20字"></textarea>20个字以上
<input type="submit">
</form>

不管是动态网站,还是其它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 name="form1" οnsubmit="CheckForm(this)">

<input type="text" name="user" id="user" check="strStartsWith('hello')" required="true" showName="用户">

</form>

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

       <script>

              //user为对象id

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

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

}

</script>

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

       <script>

              //userId为对象name

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

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

}

</script>