FormValidate 表单验证功能代码更新并提供下载


Posted in Javascript onAugust 23, 2008

FormValidate 功能更新

下载:
http://xiazai.3water.com/jslib/FormValidate.rar

更多用法,可参才:

http://jobj.googlecode.com/svn/trunk/FormValidate/demo.html

加入方法:
extend,
加入验证模式 4,同3,但是当验证不通过时,立即停止向下检查。在模式3下,如果发生错误,会把错误记录,并向下检查,模式4就不向下检查了。

用法:

<input type="text" name="name[0]" id="name[0]" ruleTpl="0" />
<input type="text" name="birthday[0]" id="birthday[0]" ruleTpl="1" />
。。。。。
。。。。。
var checkRule = [
{name:"name[0]", required:true, min:2, max:3, msg:"请输入姓名!长度必须大于2,小于3"},
{name:"birthday[0]",required:false, type:"Date", msg:"出生日期是可选项,如果输入,请输入正确的日期"},
{name:"email[0]", required:false, type:"Email", msg:"邮件是可选项,如果输入,请输入正确的邮件地址"},
{name:"scoreA[0]", required:true, type:"Num", min:0, max:100, msg:"语文分数是必须项,必须大于0小于100"},
{name:"scoreB[0]", required:true, type:"Num", min:0, max:100, msg:"数学分数是必须项,必须大于0小于100"},
{name:"scoreC[0]", required:true, type:"Num", min:0, max:100, msg:"英语分数是必须项,必须大于0小于100"}
];

JObj.plugin("FormValidate");
var va = JObj.Plugin.FormValidate;

va.extend(document.forms[0],"ruleTpl",checkRule);
return va.validate(document.forms[0],checkRule,4);

解释:
为啥要这样写?
如果不动态添加表单项,可以把 va.extend这一句删除。但是动态添加表单项的话。。。新增的表单项无法指定。
这样写,就是跟据 ruleTpl 所指定的为验证规则。这个 ruleTpl可以是任何字符串(不是它的值),比如,如果把 ruleTpl换成 ttt,那么就要写成:
va.extend(document.forms[0],'ttt',checkRule)
ruleTpl 是做为表单项的一个自定义 attribute 存在的,其值必须是 checkRule 的一个下标,如果这个下标不存,则默认不检查这一项。否则就把选定的 checkRule的元素复制一遍,达到动态添加验证规则的目的。

在添加这个功能的时候,遇到几个有趣的问题,下面我说说:

1,地址引用,请不要运行,说出下面代码中,变量 a 的值。

var a = [{name:1}];
var tmp = a.push(a[a.length - 1]);
a[tmp - 1].name = 2;
如果你说:a = [{name:1},{name:2}],那你就大错特错了,真实值是:
a = [{name:2},{name:2}];

原因很简单,因为 push的是一个对象,对象在JS里是地址引用,所以, a[tmp - 1].name = 2 的时候,其实是把 a[0] 的值改变了。

下面这一段就很简单了,值引用,不会发生上面的情况。

var a = [1,2,3];
a.push(a[a.length - 1]);
alert(a);
a[a.length - 1] = 4;
alert(a);
2,FF下动态删除表单项。
如果动态删除了某个表单项,不 alert 的话, form['itemName']还是那个被删除的 表单项。
这时,它的 parentNode,form 都为 null,但是却不能用 parentNode == null 来判断,不知道为啥,FF真是另人***,为了完成功能,只好用 item.form == null来判断,如:

if (obj == undefined || obj.form == null) return null;

IE则不存这个问题。

Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
JavaScript的==运算详解
Jul 20 Javascript
javascript this详细介绍
Sep 19 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
Javascript 篱式条件判断
Aug 22 #Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 #Javascript
javascript:void(0)的真正含义实例分析
Aug 20 #Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 #Javascript
一些不错的js函数ajax
Aug 20 #Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 #Javascript
jquery之Document元素选择器篇
Aug 14 #Javascript
You might like
PHP的面向对象编程
2006/10/09 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript 写类方式之三
2009/07/05 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python opencv 图像尺寸变换方法
2018/04/02 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python class的继承方法代码实例
2020/02/14 Python
详解python datetime模块
2020/08/17 Python
不用游标的SQL语句有哪些
2012/09/07 面试题
LINUX下线程,GDI类的解释
2012/04/17 面试题
毕业自我鉴定书
2014/03/24 职场文书
学校春季防火方案
2014/06/08 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
安全教育第一课观后感
2015/06/17 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
优化Mysql查询的示例
2022/04/26 MySQL
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers