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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
学习jQuey中的return false
Dec 18 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
微信小程序调用后台service教程详解
Nov 06 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
文件上传程序的全部源码
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JS简单计算器实例
2015/01/20 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
django+mysql的使用示例
2018/11/23 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
简单了解Python write writelines区别
2020/02/27 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
小学教师培训方案
2014/06/09 职场文书
求职意向书范本
2015/05/11 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫