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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
js left,right,mid函数
Jun 10 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
利用JS实现数字增长
Jul 28 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
你或许不知道的一些npm实用技巧
Jul 04 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实现文件安全下载
2006/10/09 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php实现映射操作实例详解
2019/10/02 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
Vue渲染函数详解
2017/09/15 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python线程创建和终止实例代码
2018/01/20 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
安全生产承诺书
2014/03/26 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL