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 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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高级应用技巧果断收藏
2015/09/25 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
php中关于换行的实例写法
2019/09/26 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
PHP 实现链式操作
2021/03/09 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
办理信用卡工作证明
2014/01/11 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
《社戏》教学反思
2016/02/22 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
python 闭包函数详细介绍
2022/04/19 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle