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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
Vue看了就会的8个小技巧
Jan 21 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
对python dataframe逻辑取值的方法详解
2019/01/30 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
给校长的建议书200字
2014/05/16 职场文书
研究生导师推荐信
2014/09/06 职场文书
婚前财产协议书范本
2014/10/19 职场文书
委托证明范本
2014/11/25 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js