JS通用表单验证函数
来源:互联网 发布:大学网络推广策划书 编辑:程序博客网 时间:2024/04/26 23:20
/*
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
* 功能:通用验证所有的表单元素.
* 使用:
* <form name="form1" onsubmit="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" onsubmit="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 onsubmit="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" onsubmit="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>
- JS通用表单验证函数
- JS通用表单验证函数-
- JS通用表单验证函数
- JS通用表单验证函数
- JS通用表单验证函数
- JS通用表单验证函数
- JS通用表单验证函数
- 通用JS表单验证
- 通用js 表单验证
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 通用表单验证函数
- 一段点击后使td变颜色的代码
- Delphi入门点点滴滴
- JAVASCRIPT中使用DOM操作XML文档
- Java内部的一些简介
- 应用整合中SSO的技术实现
- JS通用表单验证函数
- SQL 里面如何修改表名
- [求助]关于snort的插件问题
- MySQL存储引擎和数据类型
- 正则表达式收集
- 数据集的使用方法和技巧
- Web和Ftp服务器管理配置完全解析
- 期货交易的流程
- 11