简洁强大的JavaScript表单验证程序

最新推荐文章于 2024-07-11 20:55:36 发布

脚本无敌

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量720

点赞数

分类专栏：脚本TIPS 文章标签： javascript function input filter class 扩展

脚本TIPS 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>vForm表单验证程序</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div.info { width: 170px; overflow:visible; height:auto; font-size: small; position: absolute; background-color: #FFffdd; border: 1px solid #000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3); top: 375px; padding: 5px; left: 671px; } div.info_title .err{ padding: 5px; height: 50px; width: 24em; position: absolute; background-color: #FFFFCC; left: 196px; top: 114px; font-size: small; opacity:0.5; border: 1px double #333333; filter: Shadow(Color=#000000, Direction=135); filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=5); } #form1 .text_input { border-top: 1px solid #333333; border-right: 1px solid #999999; border-bottom: 1px solid #ddd; border-left: 1px solid #000000; } .info_title { color: #FF0000; background: #ACB9D1; } #form1 { position: static; left: 581px; top: 463px; border: 1px solid #3300FF; padding: 5px; ; } #imok { display: block; position: absolute; height:315px; overflow:scroll; left: 100px; top: 100px; width: 306px; } .title h1 { background: #33CCFF; border-bottom: medium solid #3366FF; } .title p { font-size: medium; text-indent: 2em; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; } code { font: 12px/18px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif; border:1px solid #0099cc; padding:5px; margin: 5px; width: 80%; color: #000; background-color: #ddedfb; display: block; }</style> <mce:script language="JavaScript" type="text/javascript"></mce:script> </head> <body οnlοad="start()"> <form id="form1" name="form1" method="get" action=""> <label for="frm_name">e-mail: <input name="frm_name" type="text" class="text_input" id="frm_name" title="输入一个电子邮箱地址"/> </label> * <p> <label for="r_pass0">输入密码： <input name="r_pass0" type="text" class="text_input" id="r_pass0" title="输入您希望的密码 " /> </label> *</p> <p> <label for="r_pass1">密码确认： <input name="r_pass1" type="text" class="text_input" id="r_pass1" title="将密码确认一次" /> </label> *</p> <p> <label for="frm_sel">选择： <select name="frm_sel" id="frm_sel" title="请选择一个答案"> <option value="0">请选择一个答案</option> <option value="1" selected="selected">1000</option> <option value="2">2000</option> <option value="3">3000</option> <option value="4">4000</option> <option value="5">5000</option> <option value="6">6000</option> </select> </label> *</p> <p> <label for="input3">输入网址： <input name="myweb" type="text" class="text_input" id="input3" title="输入一个网址" οnmοusemοve="" value="http://" maxlength="100"/> </label> *</p> <p> <label for="dateinput">输入日期 <input name="dateinput" type="text" class="text_input" title="输入一个日期" id="dateinput"/> </label> *</p> <p> <label for="mub">输入数字 <input name="qq" type="text" class="text_input" title="填写数字" id="mub"/> </label> </p> <p> <label for="len">输入任意但长度限制为10个 <input name="least10" type="text" class="text_input" maxlength="88" id="len"/> * </label> </p> <p> <label for="text">只能输入100个 <textarea name="ok100" cols="40" rows="5" id="text" title="详细内容"> *

vForm1.0beta

功能简述：

验证：
- http地址。
- 时间日期
- e-mail
- 数字
- 字符长度检查
- 一项输入与另一项输入比较（例如：密码的确认输入）
- 大小比较（只能有一个比较符号）
特点
- 扩展容易，可以方便的添加自己需要的验证方式
- 兼容性好（ie5,6 firefox,oprea）。
- 可用性好，没有使用alert()来弹出提示;

使用方法

使用时，需要定义一个出错提示框的样式，本例的样式为：div.info { width: 170px; overflow:visible; height:auto; font-size: small; position: absolute; background-color: #FFffdd; border: 1px solid #000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3); padding: 5px; }

然后在网页<head>部分中添加<script type="text/javascript" src="calendar/calendar.js"></script> ，然后可以写一个函数设置表单名称，验证规则，function start() { vFormvform.form_id = 'form1'; vform.err_class = 'info'; // (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams) //验证规则，逐条填写 vform.rules.add('frm_name',1,'e-mail','请您按照 [email]user@domain.com[/email] 的格式输入电子邮件地址。<br /><span style="color:#f00">必填项目</span>'); vform.rules.add('myweb',1,'url','请您按照 [url]http://www.domain.com[/url] 的格式输入您的网址。<br /><span style="color:#f00">必填项目</span>'); vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。<br /><span style="color:#f00">必填项目</span>'); vform.rules.add('qq',0,'number','这必须是一个整数'); vform.rules.add('least10',10,'any','您必须至少填写10个<br /><span style="color:#f00">必填项目</span>'); vform.rules.add('ok100',1,'any','这里被限制为100个字符<br /><span style="color:#f00">必填项目</span>',100); vform.init(); }最后为body添加onload事件。 <body onload="start();">

这是在blueidea看到的一个写比较简洁的js表单验证程序。
总的来说该有的功能都有了，而且代码也不是很多，适合大家的小项目拿去使用
功能简述：
验证：http地址时间日期 e-mail 数字字符长度检查一项输入与另一项输入比较（例如：密码的确认输入）大小比较（只能有一个比较符号）
特点：
扩展容易，可以方便的添加自己需要的验证方式
兼容性好（ie5,6 firefox,oprea）
可用性好，没有使用alert()来弹出提示
编写思路：
整个程序的结构及较简单，为了能够验证一些常用的格式，先对js的内置对象进行了扩展。比如：

String.prototype.isUrl = function(){
   var url = /^http:[A-Za-z0-9]+/.[A-Za-z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/;
   var tmpStr = this;
   return url.test(tmpStr);
}

这个用来验证http地址。

然后写了一个对象叫做vform 包含了主要的功能，vform初始化的时候，会检查添加好的验证规则，并将要验证的表单控件对象扩展，添加validate() 和 validlength()两个函数，并且添加onblur事件来进行验证。
出错提示采用的建立div对象的方法，出错就显示，正确就隐藏。所以还需要给div定义一个样式。
使用前需要指定表单的id 注意是id不是name 要不然会出错，而规则添加的时候要指定的是表单控件的name属性不是id

验证规则参数：

obj — 表单控件name

minLength — 填写的字符串最小长度0意味着可以不填而1意味着是必添

dataType — 验证格式有

e-mail
url
date
number
any
还有两种动态的格式用/开头, /表单控件的name 表示必须与之的值一样；
/>数字表示大于数字，类推；但是没有/>=这样的
maxLength — 最大长度。

与其他程序不一样的是：我对http地址与日期格式地址的处理不同，填入的地址没有http://我会添加上后验证，这样比较人性化，符合可用性的要求。日期的处理也是一样，先尽可能的对填写的数字进行格式转化，然后再验证。格式采用了yyyy-mm-dd的格式。

脚本无敌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简洁强大的JavaScript表单验证程序

vForm表单验证程序<!--div.info { width: 170px; overflow:visible; height:auto; font-size: small; position: absolute; background-color: #FFffdd; border: 1px solid #000; filter:progi
复制链接

扫一扫