jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

升级记录

2.0
这次又做了一次比较大的调整:增加了FunctionValidator这种校验方式,现在你可以调用外部函数了;调整了内部部分算法;
你打开下载压缩包里的index.html,将会看到全新的演示。
1、增加FunctionValidator校验方式。作用:你可以用外部函数对表单元素进行校验和处理,返回true/false表示校验是否成功;返回字符串表示自定义错误信息,校验失败;如果没有返回值表示处理过程,校验成功。范例代码如下:
$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).FunctionValidator({fun:isCardID});
fun这个参数给你的函数传递了2个参数(该表单元素的值,表单元素element) 。具体情况,请看API帮助文档
2、当你调用PageIsValid的时候,如果未校验通过,则给onError传递2个参数(第一个校验没通过元素的错误信息,第一个校验没通过元素element)。范例代码如下:
$.formValidator.initConfig({onError:function(msg){alert(msg)}});
3、AjaxValidator校验方式增加一个配置参数buttons(你点提交的按钮(组)jQuery对象)。作用:当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止。范例代码如下:
$("#test1").formValidator({...}).InputValidator({...}).AjaxValidator({
      url : "Default.aspx",
      datatype : "json",
      success : function(data){...},
      buttons: $("#button_id"),
      error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");},
      onerror : "该用户名不可用,请更换用户名重新",
      onwait : "正在对用户名进行合法性校验,请稍候..."
});
4、由于增加了自定义错误信息的功能,为了跟FunctionValidator校验方式里"fun"函数返回意义统一,更改了formValidator里的onvalid参数返回的意义,给大家带来不便请谅解。返回true/false表示校验是否成功;返回字符串表示自定义错误信息,校验失败;如果没有返回值表示处理过程,校验成功。

1.3
由于工作忙,网友提了很多珍贵的意见,到现在才更新插件,真的对不住!这次修改了几处不合理的地方。
特别增加了DefaultPassed函数,并且调整了表单元素校验的顺序。
1、增加DefaultPassed函数,作用:如果你的表单元素有默认值,而且是合法的,你可以通过这个,设置默认校验通过,示例代码如下:
   $("#sex").formValidator({onshow:"请选择你的性别",onfocus:"没有第三种性别了,你选一个吧",oncorrect:"输入正确",defaultvalue:"1"}).InputValidator({min:1,max:1,onerror:"性别忘记选了,请确认"}).DefaultPassed();
2、修正了showalert模式下,只有值发生改变的时候才触发校验
3、修改了表单提交的时候,表单元素校验的顺序,现在按照表单元素的流顺序进行校验
4、demo1里集成了datatimemask插件,具体应用,请见“出生日期”的代码
5、避免了插件与别的javascript类库的$符号的冲突
6、修改了api帮助文档

1.2.1
修复表单元素额外校验失败还会提交得bug,即formValidator里的onvalid属性

1.2.0   
这个版本,内部函数做了比较大的调整,开放了更多的函数提供给大家使用,使插件灵活性更大
特别申明:请保留插件的版权申明,谢谢
1、修改插件文件名为:formValidator.js ; 对应的正则表达式的库也被命名为formValidatorRegex.js。
2、SelectValidator被合并到InputValidtor中去,请大家赶紧修改,语法兼容,只要替换名称即可。
3、因为InputValidtor合并了SelectValidator,所以API帮助里列举了InputValidtor各属性能起作用的各种表单类型
4、开放3个公共函数,这些函数跟你的配置相关:
   SetFailState function("tipid","显示的信息"),在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态。
   IsOneValid   function("表单元素id"),主要来判断单个表单元素是否验证通过。
   GetLength    function("表单元素id"),判断表单元素的选择长度(个数)。
                checkbox或radiobutton表示(同组)选择的个数。
                select表示选择的selectedIndex值。
                其它的表示字符长度。
5、formValidator里的onvalid属性,增加了返回值,即插件校验成功后,你还可以额外校验。例子请参见demo1里的【额外校验】
                return true表示这个表单元素校验成功
                return false表示这个表单元素校验失败
  错误信息,你可以通过SetFailState函数要写
6、修复在firefox下,长度验证出错的bug。发现jQuery1.2不支持这么写:$("#textarea").attr("type")

1.1.2
1、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面)
为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug
插件将自动在url后面自动添加,形式为"id=value"的网页参数
在服务器端,你可以通过Request.querystring["id"]来取值
具体演示请看demo1里的用户名输入和Default.aspx

1.1.1版本
1、紧急修复AjaxValidator校验状态出错,以及显示状态的bug
2、调整了内部OneIsValid和formValidator函数的算法,使判断更加合理、有效

1.1 功能比较全的一个版本.
1、开放AjaxValidator表单验证,主要对$.ajax()的调用,具体演示请看demo1里的用户名输入和Default.aspx
      用户名在服务器端的校验,我是用了随机数取模,但是每次运行返回要么都是偶数要么都是奇数(不知道什么问题)。
      先是长度校验,再是格式校验,最后才是服务器端校验
2、修正AjaxValidator校验状态出错,以及显示状态的问题bug。
3、修正对AjaxValidator的api帮助。
4、修正内部几个函数的一些bug。
5、未了适应AjaxValidator,调整formValidator初始化的一部分功能。

1.0.3
1、把InputValidator的属性defaultvalue移到formValidator下。
目前defaultvalue属性只支持input和select两种tag
2、增加demo1里的范例内容,增加了性别的选择和默认值的设置(性别、学历、爱国、国家区号、你的描述)。
3、增加RegexValidator的一个属性:datatype,支持外置正则表达式的枚举类型,具体请见demo3.html
你可以额外包含这个js文件,定义一个数据类型,你可以自由的修改里面的名称和对应的值
var regexEnum =
{
 intege:"^([+-]?)\\d+$"     //整数
}
如何调用范例:$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作,你的整数正确"}).RegexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});
4、修正自动纠错的一个bug
5、修正了api帮助文档

1.0.2版本
1、为formValidator增加tipid属性。
主要为了解决多个表单元素共用一个TIP的问题,提示错误的原则:后面的成功或失败信息都不覆盖前面的失败信息
针对这个属性,已经更新了demo1和源码,具体请看范例
2、修正了部分bug和api说明文档疏漏的地方

1.0.1版本
1、修改formValidator下的属性onvalid
增加2个参数,参数1:对象本身 参数2:值。主要是校验通过后,你还希望执行一些操作,你可以方便的取到对象和值
2、去掉InputValidator、SelectValidator、CompareValidator、RegexValidator、AjaxValidator下的onvalid属性
写文档的时候太过匆忙,所以属性加多了,帮助文档和源码都已经修正
3、为formValidator增加属性:automodify,默认值:false。
这个属性只要针对,如果你输入的是非法的,离开焦点的时候将自动恢复上次的值,并且先都有提示,showword模式的提示变成onshow状态
4、为formValidator增加onfocusevent和onblurevent
因为jQuery的事件注册是覆盖的,不是attachEvent追加的,所以再托管出这两个被插件霸占住的事件onfocus和onblur
onfocusevent:获得焦点的时候,处理系统自动处理的代码后,继续你希望再执行的代码
onblurevent:失去焦点的时候,处理系统自动处理的代码后,继续你希望再执行的代码
5、提交验证过程中,如果没有验证通过,则第一个出错的获得焦点
6、申明一点:RegexValidator采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'

1、插件应用效果图浏览

效果图1:

效果2:


2、jQuery pageValidator插件主要功能

1、2种错误提示模式:文字提示、窗口提示
2、呈现时的提示
3、可以为空,空时的提示
4、获得焦点提示
5、发生不同种错误,给出不同的提示
6、可以为空,不为空时要检验控制
7、长度控制、值比较
8、范围控制
9、2个对象比较控制
10、选择个数控制
11、Ajax读取数据
12、正则表达式控制
13、同个页面,你可以划分多个校验组,每个组的校验都是互不影响的
14、单个对象或者整个校验组验证完成、或者出错,有额外的回调函数提供


3、jQuery pageValidator插件 API帮助文档


目前支持4种大的校验方式,分别是:InputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、CompareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、AjaxValidator(通过ajax到服务器上做数据校验)、RegexValidator(提供可扩展的正则表达式库) 、FunctionValidator (提供可扩展函数库来做校验)

每种格式支持的控件类型如下:

  input textarea select 校验方式 text radio checkbox file password textarea select-one InputValidator √ √ √ √ √ √ √ CompareValidator √     √ √ √   AjaxValidator √     √ √ √ √ RegexValidator √     √ √ √   FunctionValidator √ √ √ √ √ √ √ 如果你用了不支持的校验功能,插件将忽略这个校验功能。
插件目前提示错误,有两种模式:showword和showalert,即文字提示和窗口提示,下面的4大验证方式,针对showalert这种方式不是都必须的,有些配置是没有作用的
下面分别罗列全局初始化和5种校验方式公开的属性
formValidator: 用来做初始化的类型,必须先执行。("√"为showalert可用参数)
属性 属性名称 默认值 showalert 详细解释 validatorGroup 校验组 "1" √ 一个页面的控件可以分成多个组,分开校验 empty 是否可以为空 false √   automodify 输入错误离开焦点的时候,自动修复错误 false √ 先给出提示然后,自动修复,目前只支持text、file、textarea三种类型 onempty 空时候的提示 "输入内容为空"   可以为空,为空时候的提示 onshow 显示时候的提示 "请输入内容"     onfocus 获得焦点的提示 "请输入内容"     oncorrect 输入正确后的提示 "输入正确"   当你焦点离开控件的时候,如果输入正确将出现该提示 onvalid 校验通过后的回调函数 null √ 参数1:对象本身
参数2:值
校验通过后,你还希望执行一些操作,你可以通过这个属性来执行。
返回值的意义:
true/false 校验成功/失败 字符串 校验失败,返回值当作自定义错误 无 处理过程 onfocusevent 获得焦点后要追加的回调函数 null √ 参数1:对象本身 onblurevent 失去焦点后要追加的回调函数 null √ 参数1:对象本身 tipid 显示错误的容器ID 表单ID+"Tip"     defaultvalue 默认值 null √ 所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。         InputValidator:   属性 属性名称 默认值 详细解释 type 比较类型 "size" (对select无效)"size":表示比较长度 "value":比较值。 min 最小长度/值 0 (对select无效) max 最大长度/值 99999999999999 (对select无效) onerror 发生错误的提示 "输入错误"   defaultvalue 默认值 null 能满足预设默认值的需求         CompareValidator:   属性 属性名称 默认值 详细解释 desID 要比较控件的ID "" 要跟源目标进行比较的目标ID operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、<、<= datatype 数据类型 "string" 目前只支持2种:"string"、"number" onerror 发生错误的提示 "输入错误"           RegexValidator:   属性 属性名称 默认值 详细解释 regexp 正则表达式 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\' param 附加参数 "i" g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
可以任意组合,当然也可以不加参数 datatype 数据类型 "string" "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm,你可以自己修改附加pageValidatorRegex.js里的枚举项目名和表达式。 onerror: 发生错误的提示 "输入错误"           AjaxValidator: 几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助
属性 属性名称 默认值 详细解释 type 请求的类型 "GET" "POST" 或 "GET" url 发送到的URL地址 ""   datatype 返回的数据类型 "html" xml、html、script、json data 数据 ""   async 是否以异步的方式发送 true   success 当请求成功时调用的函数 null   processdata 自动处理返回的数据为字符串 true 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串 complete 当请求完成时调用的函数 null   beforesend 当请求前时调用的函数 null   buttons 你点提交的按钮(组)jQuery对象 null 当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止 error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误,在error里自动打出   FunctionValidator 属性 属性名称 默认值 返回值的解释 fun 外部函数名 默认当作处理过程 true/false 校验成功/失败 字符串 校验失败,返回值当作自定义错误 无 处理过程     公共函数: 主要是设置全局参数和判断是否通过校验 函数名 函数说明 $.formValidator.initConfig 参数:配置类型 属性 默认值 说明 validatorGroup "1" 你要针对哪个组进行配置 alertMessage false 是否弹出窗口 onSuccess null 该组校验通过后的回调函数,返回false,阻止表单的提交 submitOnce false 校验通过后,是否灰掉所有的提交按钮 onError null 该组校验失败后的回调函数, 有两个参数
第一个 一个校验没有通过的错误信息 第二个 一个校验没有通过的元素对象 $.formValidator.PageIsValid 一个参数: 不是配置类型 validatorGroup "1" 你要针对哪个组进行验证 $.formValidator.IsOneValid 一个参数: 当时设置验证的表单元素ID。
返回是否校验成功的信息。 $.formValidator.SetFailState function("tipid","显示的信息")
在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态 $.formValidator.GetLength function("表单元素id")
判断表单元素的选择长度(个数)
checkbox或radiobutton表示选择的个数。
select表示选择的selectedIndex值。
其它的表示字符长度。

4、下载API帮助、源码、示例

下载 http://files.cnblogs.com/wzmaodong/formValidator2.0.rar

5、示例代码

<script type="text/javascript">
$(document).ready(function(){
 $.formValidator.initConfig({onError:function(){alert("校验没有通过,具体错误请看错误提示")}});
 $("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});
 $("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});
 $("#test3").formValidator({onshow:"请选择你的兴趣爱好(至少选一个)",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});
 $("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});
 $("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});
 $("#nl").formValidator({onshow:"请输入的年龄(1-99岁之间)",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间,请确认"});
 $("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱,反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国?你给我选!!!!"});
 $("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码,可以为空哦",onfocus:"你要是输入了,必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊?"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});
 $("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话,可以为空哦",onfocus:"你要是输入了,必须输入正确,格式例如:0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗?"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});
 $("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>

6、特别说明

如果你在使用过程中碰到什么问题请给我留言,发现bug请不要自行修改,也请留言,达到完善插件的目的,真正服务每个程序开发人员 .
请保留插件的版权申明,谢谢
引用地址:http://www.cnblogs.com/wzmaodong/archive/2008/02/04/1034901.html

在博客园看到非常强大好用,强烈推荐!!!

阿门119 2008-03-06 21:41 发表评论

文章来源:http://www.phpweblog.net/susam119/archive/2008/03/06/2911.html

转载于:https://www.cnblogs.com/ivwsai/archive/2008/05/17/1201474.html

[导入][转载]超强大的jquery formValidator相关推荐

  1. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  2. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  3. 分享一款超棒的jQuery旋钮插件 - jQuery knob

    转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...

  4. 超棒的jQuery矢量地图生成插件 - JQVAMP

    为什么80%的码农都做不了架构师?>>>    日期:2012-5-14  来源:GBin1.com 在线演示  本地下载 是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款j ...

  5. jQuery formValidator表单校验代码生成器ver1.0

    发表感言      很感谢一直在支持我的网友们,感谢你们对插件改进的建议.虽然最近坐的脖子和屁股痛,但是我还是用休息时间完成了这个代码生成器的开发,再次感谢支持我的网友们. 谈一下写代码生成器的目的 ...

  6. 20个强大的jQuery翻书插件【 jQuery flipbook】

    ​ 许多网站使用jQuery翻书插件来展示产品目录和销售广告册子.jQuery翻页书解决方案给访客提供了方便而有效的浏览一套东西的体验.如果做得好,就如同手头有一本印刷版的册子.通过翻页书插件,你可以 ...

  7. jquery.formValidator表单验证语法

    ms是从升级手册中摘抄出来的. 规范插件的命名: 1.对插件所有函数相关属性的命名采用Camel风格命名,即:第一个单词首字母小写,其余单词首字母大写.本次变动比较大,为了规范插件的命名,希望大家谅解 ...

  8. jQuery formValidator表单校验代码生成器ver1.1,一键产生所有代码

    谈一下写代码生成器的目的 1.减少书写错误.主要是配置参数容易书写错误,JS是认大小写. 2.提高代码复用性. 3.让不懂JS的人更容易上手. 4.不用记忆配置参数. 基本操作: 产生单条校验代码 1 ...

  9. 基于 猫冬的 jQuery formValidator表单验证 的asp.net 控件

    为了方便在asp.net中使用,封装了一下 <猫冬 的 jQuery formValidator表单验证> 控件 其实也不是什么控件,只是一个类,方便生成前台js. 特点: 1.后台生成的 ...

最新文章

  1. linux c/c++ 判断是否为中文(不包括中文符号,非正则)
  2. TextureView+MediaPlayer实现在线短视频播放
  3. Python在Linux实现代码特效,关于在Linux系统上的Ubuntu上基于python3、shell语言代码的实现...
  4. leetcode-92-反转链表②
  5. 女性最常说的5大谎言:
  6. mongodb java 单例_Java单例MongoDB工具类
  7. 奎享添加自己字体_如何添加字体?系统字体的两种方法添加方法
  8. 二项分布期望和方差的公式推导
  9. 度分秒怎么计算加减乘除?
  10. 航空航天行业工作站应用---EDA仿真计算工作站
  11. 玛雅日历和2012年12月,whats的新政
  12. 计算机亮度快捷键,调节电脑亮度的快捷键是什么
  13. 深度学习服务器?深度了解一下!
  14. Unity引擎源代码开源地址
  15. java记事本统计功能_JAVA 运用流编程实现简单的记事本功能
  16. 【数据结构】最大曼哈顿距离
  17. RDLC报表横向放纸不能横向打印问题解决
  18. 【基础知识】多标签分类CrossEntropyLoss 与 二分类BCELoss
  19. AF BAF tuning <5>
  20. H5C3进阶——播放器

热门文章

  1. 华为android强刷系统下载地址,华为P6S官方rom固件刷机包下载_华为P6S原版系统强刷升级包...
  2. Spring Security UserDetail
  3. js 高级-创建对象
  4. vue 表单 input radio
  5. object.\__mro__
  6. Werkzeug routing
  7. nginx ngx_http_access_module
  8. 2.6 定位数据不匹配
  9. Pandas 文本数据方法 get_dummies()
  10. nms python代码_?标检测中的?极?值抑制算法(nms):python代码解析