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下string.format函数补充
Aug 24 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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字符串截取的简单方法
2013/07/04 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
python装饰器与递归算法详解
2016/02/18 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python中的列表与元组的使用
2019/08/08 Python
python调用支付宝支付接口流程
2019/08/15 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
办公室主任岗位职责
2013/11/08 职场文书
心理健康心得体会
2014/01/02 职场文书
会议主持词
2014/03/17 职场文书
项目工作说明书
2014/07/29 职场文书
个人贷款收入证明
2014/10/26 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers