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

2013-10-14  来源:本站原创  分类:jquery  人气:2 

ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态。

2008-07-22 14:47

bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态。

这个bug已经修复,请重新下载。

2008/7/17 14:12:00 jQuery formValidator 3.1ver

1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。
该属性是个对象,默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。
注:只能在type:"size"的时候使用,即比较长度的时候。

2、修改自动构建提示层的语法。为formValidator函数增加relativeid属性。
relativeid:表示提示层相对定位的控件ID,如果为空,则用当前校验控件的ID。
tipid:表示自动创建的提示层的ID,如果为空,则用当前校验控件的ID+"Tip"来命名。

3、修正ajaxValidator函数里beforesend属性的bug。代码忘记传递它的唯一参数。

4、修正ajaxValidator函数在后台无法获取中文的bug。

5、更新了升级记录、用户手册、增加了2个提问。
1、现场演示
http://img.jb51.net/online/formValidator3.1/demo.html

2、jQuery pageValidator插件主要功能

支持所有类型客户端控件的校验
支持jQuery所有的选择器语法,只要控件有唯一ID和type属性
支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。
支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式)
支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。
支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。
支持自动构建提示层。可以进行精确的定位。
支持自定义错误提示信息。
支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件
支持2个控件值的比较。目前可以比较字符串和数值型。
支持服务器端校验。
支持输入格式的校验。

3、jQuery formValidator插件 API帮助文档
帮助文档请点击这里

4、下载API帮助、源码、示例
http://xiazai.jb51.net/jslib/formValidator2.4.rar
http://xiazai.jb51.net/jslib/formValidator3.1.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请不要自行修改,也请留言,达到完善插件的目的,真正服务每个程序开发人员 .
请保留插件的版权申明,谢谢

相关文章
  • jQuery formValidator表单验证插件开源了 含API帮助.源码.示例 2013-10-14

    ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体

  • jQuery formValidator表单验证插件 4.1.1新增的功能 演示 2011-07-10

    新版插件功能预览网址 http://www.yhuan.com/formValidator4.1.1/demo8.html 新版的帮助文档可以参考一下这里: http://www.yhuan.com/formValidator4.1.1/doc/index.html 投票贴:你认为新版4.1.1版本的功能实用吗?欢迎提建议 http://www.yhuan.com/thread-121-1-1.html 新增以下功能: 1.增加输入框设置默认值,formValidator函数增加onShowTe

  • jValidate 基于jQuery的表单验证插件 2015-03-25

    网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼前一亮. 网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: <input name="name" type="text" id="name" size="30"

  • jQuery表单验证插件formValidator(改进版) 2014-08-20

    随着jQuery被越来越多的人使用,基于jQuery的表单验证插件,也从无到现在比较流行的已经有10个左右了 枚举对象的使用: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true;

  • JQuery表单验证插件EasyValidator用法分析 2013-12-20

    这篇文章主要介绍了JQuery表单验证插件EasyValidator用法,以实例形式系统分析了EasyValidator的功能特性及具体用法,是非常实用的jQuery插件,需要的朋友可以参考下 本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针

  • jquery 最简单易用的表单验证插件 2014-03-30

    jquery 最简单易用的表单验证插件,不论是从应用还是学习插件的写法都是值得一看的. /* Jquery 表单验证插件 janchie 2010.1 [email protected] 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [

  • jQuery 表单验证插件formValidation实现个性化错误提示 2014-08-28

    这里介绍另外一个表单验证插件formValidation,这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息,显示在表单元素右上角类似于提示条 其效果图如下: 使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 <script src="jquery.js" type="text/javascript"

  • jquery表单验证插件(jquery.validate.js)的3种使用方式 2014-12-26

    这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下 jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 <script type="text/javascript" src="js/jquery-1.6.1.min.js">

  • 轻量级的jQuery表单验证插件 - HAPPY.js 2012-09-14

    日期:2012-9-14 来源:GBin1.com 在线演示 本地下载 功能强大的表单验证插件很多,以前我们介绍过validation engine,但是如果你希望使用简单轻量级的表单验证插件的话,你可以考虑使用HAPPY.js. 主要特性 支持jQuery和Zepto.js 使用简单,支持日期,数字,电子邮件,最大/最小数和手机号码等验证 拥有很多自定义的选项 支持IE6-8,FF3.6,Chrome7和safari5 如何使用 HTML代码: <form id="login"

  • 10 款高质量的 jQuery 表单验证插件 2013-05-14

    本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间.希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery and Ajax to validate Form 4) WordPress Jquery Contact Form 5) How to Validate Forms in both sides using PHP and jQ

  • jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js 2014-05-22

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数

  • jQuery 表单验证插件 jQuery Validation Engine 使用 2014-08-16

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engine 的<form>的ID: <script src="lib/jquery-1.8.3.min.js"></script> <!-- validationEngine --> <link rel="stylesheet&qu

  • jquery表单验证插件--MintValidator 2015-03-23

    简介 表单验证插件,正则表达式和回调函数验证结合,更强的灵活性.支持ajax验证,支持二维验证 网站:http://mint-ui.wemakers.net/ 下载:http://git.codeweblog.com/895925636/mint-ui 用法 MintValidator在用法上与其他不是很相同,所有配置要在js里完成,这主要是为了实现js代码和html分离.MintValidator为了强调灵活,并没有做那种"一种代码搞定所有事"的事情,因此使用上显得不是那么的友好.

  • jquery 实现表单验证功能代码(简洁) 2013-11-05

    jquery 实现表单验证功能代码,代码比较简洁,需要的朋友可以参考下 1. 页面效果,自动提示验证信息... 2. 页面代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet&

  • jquery form表单提交插件asp.net后台中文解码 2014-12-19

    对于jquery form表单提交插件jquery.form.js,在提交表单数据时,如果表单数据有中文,则被提交的数据是要经过编码的. 在asp.net 后台页面提取时需要解码.解码的方式为:HttpUtility.UrlDecode(context.Request["infostr"].ToString());

  • jQuery表单验证插件 Live Form Validation 2008-09-19

    Live Form Validation 网站 : http://jquery.com/ 这是一个结合 PHP 和 Ajax 的表单验证的 jQuery 插件. $(document).ready(function() { $('#contact form').liveValidation({ validIco: 'gfx/validIco.gif', // url to valid icon invalidIco: 'gfx/invalidIco.gif', // url to invalid

  • jquery表单验证插件 2014-05-10

    今天在写表单的时候需要一个表单验证的插件,从网上找了个:https://github.com/sadne/Validation-for-Bootstrap,写得很好,可惜的是这哥们不更新了,而且我在使用的时候发现了一个bug,在参数继承的时候有毛病,我修改了一下 bootstrap-validation.js function($) { $.fn.validation = function(options) { return this.each(function() { globalOption

  • jquery表单验证插件 jquery.form.js 2012-05-08

    Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 http://docs.jquery.com/Downloading_jQuery 2.Form插件下载 https://github.com/malsup/form/blob/master/jquery.form.js 3.Form插件的简单入门 第一步:先增加一个表单 <form id="myForm" action="comment.php"

  • 修改了一个开源的Bootstrap表单验证插件 2014-06-22

    jqBootstrapValidation (版本1.3.7)是一个为Bootstrap增加表单验证功能的插件,本来想用在项目中,结果试了一下不管用.看了看源码才明白这个插件是针对Bootstrap2.x开发的,而我用的是Bootstrap3.x,由于插件中是用的硬编码的Bootstrap2.x的class名作为selector的所以肯定不起作用,于是我把里面的几个class名替换成Bootstrap3.x的类名,并且修改了几处逻辑错误后,就可以正常使用了. 主要的改动: error 改为 ha

  • jQuery Validate 表单验证 2012-01-19

    在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.validate验证框架帮我们解决了困难,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持. 今天记录的就是用此插件来实现表单验证,效果图: 1.获取JS文件:http://jqueryvalidation.org/,这个插件的用法就不再多讲了,如不熟悉或者还