扩展的“ 通用表单验证函数 ”

最新推荐文章于 2025-04-13 21:16:04 发布

yhl_621

最新推荐文章于 2025-04-13 21:16:04 发布

阅读量2.7k

点赞数

分类专栏： JVASCRIPT 文章标签：扩展正则表达式 input javascript string function

本文链接：https://blog.youkuaiyun.com/yhl_621/article/details/615273

版权

JVASCRIPT 专栏收录该内容

4 篇文章

订阅专栏

表单的验证在实际的开发当中是件很烦琐又无趣的事情，在网上偶尔一次无意中搜索“通用表单验证函数”，搜索到“灰豆宝宝.net的专栏”一篇帖子：

http://blog.youkuaiyun.com/wanghr100/archive/2004/08/23/82689.aspx

原文摘录如下：

不管是动态网站,还是其它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>

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>

转自：伊图教程网[www.etoow.com]

原作者已做了大量的基础工作，提供了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 自行根据业务需要添加