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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
JS启动应用程序的一个简单例子
May 11 Javascript
javascript 必知必会之closure
Sep 21 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JSONObject使用方法详解
Dec 17 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
uni-app如何页面传参数的几种方法总结
Apr 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查找任何页面上的所有链接的方法
2013/12/03 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
vue 解决computed修改data数据的问题
2019/11/06 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python检查指定文件是否存在的方法
2015/07/06 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python用for循环求和的方法总结
2019/07/08 Python
python os模块在系统管理中的应用
2020/06/22 Python
详解Python 最短匹配模式
2020/07/29 Python
python图片合成的示例
2020/11/09 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
高等教育专业自荐信范文
2014/03/26 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
python 调用js的四种方式
2021/04/11 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python