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

 更新时间:2008年08月23日 08:33:31   作者:  
加入验证模式 4,同3,但是当验证不通过时,立即停止向下检查。在模式3下,如果发生错误,会把错误记录,并向下检查,模式4就不向下检查了
FormValidate 功能更新

下载:
http://xiazai.jb51.net/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获取网页表单action属性的方法

    JavaScript获取网页表单action属性的方法

    这篇文章主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 怎样用JavaScript实现观察者模式

    怎样用JavaScript实现观察者模式

    这篇文章主要介绍了怎样用JavaScript实现观察者模式,想学习设计模式的同学,可以参考一下
    2021-04-04
  • JS伪继承prototype实现方法示例

    JS伪继承prototype实现方法示例

    这篇文章主要介绍了JS伪继承prototype实现方法,结合实例形式对比分析了基于prototype实现模拟继承的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • javascript+Canvas实现画板功能

    javascript+Canvas实现画板功能

    这篇文章主要为大家详细介绍了javascript+Canvas实现画板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JavaScript躲避行星游戏实现全程

    JavaScript躲避行星游戏实现全程

    本文将使用 canvas 创建一个躲避小行星游戏。另外将重点介绍的两个方面是:如何使用 JavaScript 来检测键盘输入,以及如何在游戏中使用和处理 HTML5 音频。希望你能够喜欢
    2022-08-08
  • js+springMVC 提交数组数据到后台的实例

    js+springMVC 提交数组数据到后台的实例

    今天小编就为大家分享一篇js+springMVC 提交数组数据到后台的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript实现手机震动API代码

    javascript实现手机震动API代码

    一个新的API出来了。HTML5 (很快)将支持用户设备振动。这明显是很有趣的事情,比如它可以用户触发提醒,提升游戏体验,下面小编给大家整理javascript手机震动api,需要的朋友可以参考下
    2015-08-08
  • JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

    JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

    js定义类或对象的介绍,需要的朋友可以参考下
    2012-08-08
  • 两种方法实现在HTML页面加载完毕后运行某个js

    两种方法实现在HTML页面加载完毕后运行某个js

    这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下
    2014-06-06
  • JS中${}什么意思有什么作用

    JS中${}什么意思有什么作用

    在JavaScript中,${}用于模板文字(template literals),为ES6中新增的字符串方法,其作用是配合反单引号实现字符串拼,代替以前传统复杂的引号双引号与+的拼接,简介明了,非常好用,本文给大家介绍JS中‘${}‘什么意思有什么作用,感兴趣的朋友一起看看吧
    2023-08-08

最新评论