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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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 之Section与Cookie使用总结
2012/09/14 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Smarty保留变量用法分析
2016/05/23 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python join方法使用详解
2019/07/30 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
什么是python的函数体
2020/06/19 Python
python实现简单猜单词游戏
2020/12/24 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
大专自我鉴定范文
2013/10/01 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
农业生产宣传标语
2014/10/08 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
检讨书之工作不认真
2019/08/14 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript