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

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则不存这个问题。

时间: 2024-09-14 17:55:46

FormValidate 表单验证功能代码更新并提供下载_javascript技巧的相关文章

jquery 实现表单验证功能代码(简洁)_jquery

1. 页面效果,自动提示验证信息... 2. 页面代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css

jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

AngularJs表单验证实例代码解析_AngularJS

常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

JS实现表单验证功能(验证手机号是否存在,验证码倒计时)_javascript技巧

废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

JavaScript 表单验证常用代码

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: •用户是否已填写表单中的必填项目? •用户输入的邮件地址是否合法? •用户是否已输入合法的日期? •用户是否在数据域 (numeric field) 中输入了文本? 下面是连同 HTML 表单的完整代码:  代码如下 复制代码 <html> <head> <script type="text/javascript&qu

jQuery表单验证功能实例_jquery

本文实例讲述了jQuery表单验证功能.分享给大家供大家参考.具体如下: 这里使用jquery实现的表单验证效果,以Ajax方式验证你的表单是否填写正确,如果验证不通过,会将表单元素背景变成红色,并给出提示信息,简单实用,jquery表单验证功能已经有很多了,本款表单验证特效看上去更简单,不懂Ajax的朋友,或许直接套用即可实现无刷新表单验证功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-form-check-c

使用JQuery实现智能表单验证功能_jquery

先给大家展示下表单效果图,具体效果如下所示: 1.前台一开始用JQuery实现,先来上HTML标记: <body> <form id="form1" runat="server"> <table class="tble"> <tr><td class="td1">用户名 <input type="text" class="td&qu

Jquery练习之表单验证实现代码_jquery

Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

JS表单验证的代码(常用)_javascript技巧

注册验证: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = jQuery("#editForm"); if(!vailNickName())return; if(!vailPhone())re