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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
vue.js的提示组件
Mar 02 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue实现通讯录功能
Jul 14 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP实现简单的计算器
2020/08/28 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
语义化 H1 标签
2008/01/14 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
基于webpack 实用配置方法总结
2017/09/28 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python语言元素知识点详解
2019/05/15 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python3.8下载及安装步骤详解
2020/01/15 Python
在keras中实现查看其训练loss值
2020/06/16 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
个人自我鉴定写法
2013/11/30 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Python实现排序方法常见的四种
2021/07/15 Python
千万级用户系统SQL调优实战分享
2022/03/03 MySQL