JQuery表单验证插件EasyValidator用法分析

本文实例讲述了JQuery表单验证插件EasyValidator用法。分享给大家供大家参考。具体如下：

本插件的宗旨是：用户无需写一行JS验证代码，只需在要验证的表单中加入相应的验证属性即可，让验证功能易维护，可扩展，更容易上手。

DEMO中已经包含了常用的正则表达式，可以直接复用，为了考虑扩展性，所以针对不同用户特殊需求，自行写正则吧。

EasyValidator实现的功能：

1.提示功能（在表单或者其他标签中加入tip="想提示的文字"）

如：

代码如下:

<input name="name" tip="请输入你的名字哟~">

或者

代码如下:

<a href="http://wangking717.iteye.com/blog/769021" tip="到EasyValidator官方主页来" target="_blank">有疑惑可以到这里提问</a>

2. 普通表单验证（在表单中加入reg="正则表达式"）
如：

代码如下:

<input name="username" reg="正则" />

普通表单验证DEMO：http://easyvalidator.googlecode.com/svn/trunk/index.html

3. AJAX表单验证（在表单中加入url="验证系统地址"）
如：

代码如下:

<input name="username" url="地址" />

AJAX验证DEMO：没有在线演示，请在本地运行ajax_demo.html，请求远程的PHP文件，当然可以为JSP或者ASP，我这里在程序里预设了一些已存在的数据，用户可以自行参考。

4. 普通表单验证 +  AJAX表单验证 （普通验证通过以后，再进行AJAX验证）
如：

代码如下:

<input name="username" reg="正则" url="地址" />

5. 扩展函数表单验证（某些业务特殊需求）：

这些特殊需求都是根据业务来的，这里列举一下这样的情况：

1.checkbox选择框数量验证，如限制别人至少选择1个，最多选择5个checkbox。
2.多个表单之间进行比较，如【开始时间表单】一定小于等于【结束时间表单】或者两个密码表单要相等，用于注册的时候，等等。

由于这种情况的特殊性，所以用户得自己写业务逻辑代码，官方已经提供了extendsValidate扩展函数，在里面写自己的逻辑代码即可。

扩展函数表单验证DEMO：http://easyvalidator.googlecode.com/svn/trunk/extends_demo.html

BUG修复日志：
2010-9-24 : 修复同一页多个FORM提交BUG ，TIP错位BUG
2010-9-26 : 新增bgiframe插件, 修复IE6下TIP 遮罩不了 SELECT表单
2010-9-27 : 增加扩展API，并重构核心库

2011-1-1   : 将表单验证的TIP独立出来，让TIP,URL,REG成为单独的组建而存在，更加灵活！

2011-1-28 : 修改了AJAX的TIP纠错BUG，逻辑修改，并且将AJAX的请求的远程程序validate_user.php的编码设置GB2312。

官方下载地址：http://code.google.com/p/easyvalidator/downloads/list

或者点击此处本站下载。http://www.jb51.net/jiaoben/32303.html

在线正则验证器：http://regexpal.com/

希望本文所述对大家的web程序设计有所帮助。

赞 (0)

相关推荐

  • jquery插件制作 表单验证实现代码

    先下页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>&l

  • JS实现的通用表单验证插件完整实例

    JS实现的通用表单验证插件完整实例

    本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • jQuery表单验证插件解析(推荐)

    一:插件 (1) Validform_v5.3.1_min.js Validform_Datatype.js (2)网址:http://validform.rjboy.cn 在这个网站上有demo和插件下载链接. 二:普通验证 (1)Validform_Datatype.js /* Validform datatype extension By sean during December 8, 2012 - February 20, 2013 For more information, pleas

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

    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:tr

  • jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • jquery表单验证使用插件formValidator

    jquery表单验证使用插件formValidator

    1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

  • jValidate 基于jQuery的表单验证插件

    jValidate 基于jQuery的表单验证插件

    网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: 复制代码 代码如下: <input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvme

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • JQuery表单验证插件EasyValidator用法分析

    JQuery表单验证插件EasyValidator用法分析

    本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

  • Yii框架中jquery表单验证插件用法示例

    Yii框架中jquery表单验证插件用法示例

    本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • 学习使用jQuery表单验证插件和日历插件

    首先学习使用jQuery表单验证插件: 1.Jquery表单验证插件-Validation的学习与使用 (1)Validation的验证有几种规则,一是在class属性中定义验证规则,如class="required",minlength="2".为了实现将验证规则完全编写到class属性中,另外一种是通过引入新的jquery插件-jquery.metadata.js来实现验证规则的定义,此时表单的验证调用的方法改为如下所示的代码: 将$("#form&q

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

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

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

  • Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

    本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法.分享给大家供大家参考,具体如下: Bootstrap是现在非常流行的一款前端框架,这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator. 先来看一下效果图(样式是不是还不错O(∩_∩)O哈哈~). Bootstrapvalidator下载地址:https://github.com/nghuuphuoc/bootstrapvalidator/? 引入对应的CSS和JS <l

  • 实例详解jQuery表单验证插件validate

    validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq

  • jQuery表单域属性过滤器用法分析

    jQuery表单域属性过滤器用法分析

    本文实例讲述了jQuery表单域属性过滤器用法.分享给大家供大家参考.具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从文档中查找表单域. 1. :checked选择器 用于选择所有被选中的表单域.格式: 复制代码 代码如下: $("selector:checked") 可以是input,radio和checkbox 2. :enabled选择器 用于选择所有可用的表单域,格式: 复制代码 代码如下:

  • jQuery表单验证插件formValidator(改进版)

    枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT

  • jquery表单验证插件validation使用方法详解

    jquery表单验证插件validation使用方法详解

    一.如何使用 引入js文件 <script src="jquery.js"></script> <script src="jquery.validate-1.13.1.js"></script> 编写html页面,这里仅以用户名.密码为例 <body> <form id="demoForm"> <fieldset> <legend>用户登录</l

随机推荐