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

 扩展的“ 通用表单验证函数 ”
表单的验证在实际的开发当中是件很烦琐又无趣的事情，在网上偶尔一次无意中搜索“通用表单验证函数”，搜索到“灰豆宝宝.net的专栏”一篇帖子：
http://blog.csdn.net/wanghr100/archive/2004/08/23/82689.aspx
原文摘录如下：
不管是动态网站,还是其它B/S结构的系统,都离不开表单,表单做为客户端向服务器提交数据的载体担当相当重要的角色.这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...
本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.
个人以为表单的验证应该包含两部分:
第一,判断用户输入的数据是否合法.
第二,提示用户你的数据为什么是不合法的.
所以,我们的通用表单验证函数要实现的功能就是:
第一,取得用户输入的数据GetValue(el)
第二,验证用户的数据CheckForm(oForm)
IE支持自定义属性,这就是这个通用函数实现的基础
我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.
check属性:该属性用于存储数据合法性的正则表达式.
warning属性:该性性用于存储出错误提示信息.
第三,返回有误的表单提示GoBack(el)
这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)
搞错了就全功尽弃了 :)

写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.
我们要做的就是写好正则表达式!
接下来我们来分析一下所有的表单元素
按其共性,我们将它们分为三类
每类表单的特点不一样,我们的目标就是写出通用的.
1.文输入框Text





2.单多选框Choose




3.单多下拉菜单Select


demo.htm 演示文件

通用表单函数测试:

test:不验证

账号:不能为空

密码:六位以上

电话:

相片上传:

出生日期:日期格式2004-08-10

省份:

请选择
福建省
湖北省



选择你喜欢的运动:

游泳
篮球
足球
排球


你的学历:
大学
中学
小学


个人介绍:
20个字以上

转自：伊图教程网[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 自行根据业务需要添加
如何使用呢?
前提是引入Check.js文件:
一、验证整个form

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

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