在形成验证方面,它’很难拥有与每个表格合作的多功能解决方案。弄清楚如何显示错误不是一个简单的任务。这是我试图用这个脚本解决的东西。当需要显示错误时,脚本会在输入的右上角创建一个div并将其定位。这样你就是’T必须担心您的HTML表单结构。圆角和影子是用CSS3完成的,并在非兼容浏览器中降级。没有所需的图像。

下载源代码 查看演示

验证范围从电子邮件,电话,URL到更复杂的呼叫,如ajax处理。
捆绑在几个语言环境中,错误提示可以在您选择的语言环境中翻译。

**重要**:V2是原始1.7分支的重要重写。随着API的变化,请阅读文档!此外,文档始终更新到GitHub Readme上

遗留1.7文档和下载可以在GitHub上下载时在包下找到

安装

1.解压缩存档
2.在页面中包含脚本jQuery.ValideNgine.Closure.js
3.选择选择的区域设置,在您的页面中包含它:jQuery.ValideNgine-xx.js
4. **阅读本手册**并理解API

运行演示

大多数演示通过打开各自的HTML文件是功能的。但是,Ajax Demos需要使用Java6来启动轻量级HTTP服务器。

1.从文件夹中运行脚本`rundemo.bat`(windows)或`rundemo.sh`(unix)
2.打开指向[http:// localhost:9173]的浏览器(http:// localhost:9173)

参考

第一个将jQuery链接到页面

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

附加* jquery.validationEngine *及其区域设置

    <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

最后链接所需的主题

    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

实地验证

使用该字段定义验证’s ** class **属性。以下是一些示例,显示它是如何发生的:

    <input value="[email protected]" class="validate[required,custom[email]]" type="text" name="email" id="email" />
    <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
    <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />

有关验证器的更多详细信息,请参阅以下部分。

实例化

验证器通常使用以下形式的呼叫来实例化:

    $("#form.id").validationEngine(action or options);

该方法采用一个或多个可选参数,操作(和参数)或选项列表以自定义引擎的行为。

这是一瞥:说你有一种形式是这种

    <form id="formID" method="post" action="submit.action">
        <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
    </form>

以下代码将实例执行验证引擎:

    <script>
    $(document).ready(function(){
        $("#formID").validationEngine('attach');
       });
    </script>

行动

在里面

使用默认设置初始化引擎

    $("#formID1").ValidationEngine({ProtectPosition:"centerRight", scroll: false});
    $("#formID1").validationEngine('init', {promptPosition : "centerRight", scroll: false});
<pre>
 
<h3>attach</h3>
 
Attaches jQuery.validationEngine to form.submit and field.blur events.
<pre lang="html">
    $("#formID1").validationEngine('attach');
<pre/>
 
<h3>detach</h3>
 
Unregisters any bindings that may point to jQuery.validaitonEngine.
<pre lang="html">
    $("#formID1").validationEngine('detach');

证实

验证表单并相应地显示提示。返回* true *如果表单验证,* false *如果它包含错误。请注意,如果使用Ajax表单验证器,则实际结果将异步地传递给函数*选项.OonsjaxFormplete *。

    alert( $("#formID1").validationEngine('validate') );

showprompt(提示文本,类型,提示,showarrow)

在给定元素上显示提示。请注意,提示可以显示在任何元素上的ID上。

该方法需要四个参数:
1.提示本身的文本
2.定义提示的视觉外观的类型:‘pass’ (green), ‘load’(黑色)任何其他(红色)
3.一个可选位置:“topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*
4.一个可选的布尔值,它告诉提示是否应显示定向箭头

    <fieldset>
       <legend id="legendid">Email</legend>
       <a href="#" onclick="$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')">Show prompt</a>
    </fieldset>

隐藏

关闭当前表单中的错误提示(如果页面上有多种表格)

    $('#formID1').validationEngine('hide')">Hide prompts

全部藏起来

关闭**所有**页面上的错误提示。

    $('#formID1').validationEngine('hideAll');

选项

选项通常将作为参数传递给INIT操作。
$(“#formID1”).ValidationEngine({ProtectPosition:“centerRight”, scroll: false});

ValidationEventTrigger.

触发现场验证的事件名称,默认为* blur *。

滚动
告诉我们是否应该将页面滚动到第一个错误,默认为* true *。

提示

提示表演应该在哪里?可能的值是“topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*.

ajaxformveridation.
如果设置为true,请转动Ajax表单验证逻辑。默认为* false *。
在调用validate()操作或提交表单时发生表单验证。

OnBeforeAjaxFormValidation(表单,选项)
打开AjaxFormValidation时,在异步AJAX表单验证呼叫之前调用函数。可能会返回false以停止Ajax表单验证

OnaJaxFormplete:功能(表单,状态,错误,选项)
打开AjaxFormValidation时,函数用于异步处理验证结果。

isoverflown.
当表单在滚动div中显示时设置为true,默认为* false *。

过度流动
选择器用于选择溢出的容器,默认为*””*.

验证器

验证器在字段中编码’S类属性,如此

必需的

自身说话,如果元素没有值,则失败。此验证器可以应用于几乎任何类型的输入字段。

    <input value="" class="validate[required]" type="text" name="email" id="email" />
    <input class="validate[required]" type="checkbox" id="agree" name="agree"/>
    <select name="sport" id="sport" class="validate[required]" id="sport">
       <option value="">Choose a sport</option>
       <option value="option1">Tennis</option>
       <option value="option2">Football</option>
       <option value="option3">Golf</option>
    </select>

自定义[regex_name]

验证元素’S值为预定义的正则表达式列表。

<input value="[email protected]" class="validate[required,custom[email]]" type="text" name="email" id="email" />

有关可用的正则表达式列表,请参阅自定义Regex部分。

函数[methodname]

使用第三方函数调用验证字段。如果发生验证错误,则函数必须返回将在错误提示中自动显示的错误消息。

    function checkHELLO(field, rules, i, options){
      if (field.val() != "HELLO") {
         // this allows the use of i18 for the error msgs
         return options.allrules.validate2fields.alertText;
      }
    }

以下声明将是

<input value="" class="validate[required,funcCall[checkHELLO]]" type="text" id="lastname" name="lastname" />

ajax [选择器]

使用异步AJAX请求将验证委托给服务器URL。选择器用于标识翻译文件中的属性块,请执行以下示例。

    <input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input" type="text" name="user" id="user" />
 
 
 
    "ajaxUserCall": {
        "url": "ajaxValidateFieldUser",
        "extraData": "name=eric",
        "alertText": "* This user is already taken",
        "alertTextOk": "All good!",
        "alertTextLoad": "* Validating, please wait"
    },

* URL.–是呼叫的远程宁静服务
* extraData.–要发送的可选参数
* AlertText.–错误提示消息是验证失败
* AlertTextok.–可选提示是验证成功(显示绿色)
* AlertTextLoad.–执行验证时显示的消息

此验证器在Ajax部分的进一步详细信息中解释。

等于[Field.id]
检查当前字段’s值等于指定字段的值。

min [float]
验证字段时’如果较少或等于给定参数,则S值。

max [float]
验证字段时’如果更多或等于给定参数,则值。

minsize [整数]
验证元素内容大小(以字符为单位)是否更或等于给定的*整数*。整数 <= input.value.length maxsize [Integer]
验证元素内容大小(以字符为单位)是否小于或等于给定的*整数*。 Input.Value.Length.Length. <= integer 过去[现在或日期]

检查元素是否存在’S值(隐式的日期)早于给定的*日期*。什么时候“NOW”用作参数,日期将在浏览器中计算。请注意,服务器日期可能不同。日期使用ISO格式YYYY-MM-DD

    <input value="" class="validate[required,custom[date],past[now]]" type="text" id="birthdate" name="birthdate" />
    <input value="" class="validate[required,custom[date],past[2010-01-01]]" type="text" id="appointment" name="appointment" />

未来[现在或约会]

检查元素是否存在’S值(隐式的日期)大于给定的*日期*。什么时候“NOW”用作参数,日期将在浏览器中计算。请注意,服务器日期可能不同。日期使用ISO格式YYYY-MM-DD

    <input value="" class="validate[required,custom[date],future[now]]" type="text" id="appointment" name="appointment" /> // a date in 2009
    <input value="" class="validate[required,custom[date],future[2009-01-01],past[2009-12-31]]" type="text" id="d1" name="d1" />

MincheckBox [Integer]

void验证时的最小*整数*复选框被选中。
验证器使用特殊的命名约定来标识组的复选框。

以下示例,强制执行至少两个选中复选框

    <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/>
    <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/>
    <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>

注意input.name如何在字段中相同。

MaxCheckBox [Integer]

与上面相同,但限制了所选复选框的最大数量。

选择器

We’ve介绍了选择器的概念,而不提供有关它们的许多细节:选择器是一个字符串,用作匹配翻译文件中属性的键。
采取以下例子:

    "onlyNumber": {
        "regex": /^[0-9\ ]+$/,
        "alertText": "* Numbers only"
    },
    "ajaxUserCall": {
        "url": "ajaxValidateFieldUser",
        "extraData": "name=eric",
        "alertText": "* This user is already taken",
        "alertTextLoad": "* Validating, please wait"
    },
    "validate2fields": {
        "alertText": "* Please input HELLO"
    }

唯一的,唯一的曲线和validate2fields都是所有选择者。 jQuery.ValidationEngine配备标准集,但欢迎您添加您自己来定义Ajax后端服务,错误消息和/或新的正则表达式。

ajax.

ajax. 验证有两种口味:

1.字段Ajax验证,当用户在字段中输入值并移开时发生。
2.表单Ajax验证,该验证在提交表单或调用validate()操作时进行。

这两个选项都是可选的。

协议

客户端将表单字段和值作为GET请求发送到Form.action URL。

Client calls url?fieldId=id1&fieldValue=value1&…etc ==> Server (form.action)

服务器使用数组列表响应:[FieldID,状态,errormsg]。

* fieldid是该字段的名称(ID)
*状态是验证的结果,如果通过,则为true,如果失败,则为false
* errormsg是提示文本的错误字符串(或选择器)

Client receives <== [["id1", boolean,"errorMsg"],["id2", false, "there is an error "],["id3", true, "this field is good"]] Server Note that only errors (status=false) shall be returned from the server. However you may also decide to return an entry with a status=true in which case the errorMsg will show as a green prompt.

回调

由于表单验证是异步委派到表单操作,因此我们提供了两个回调方法:

** OnBeforeajaxFormValidation(表单,选项)**在Ajax表单验证呼叫之前调用,可能会返回false以停止请求

** OnaJaxFormplete:函数(表单,状态,json_response_from_server,选项)**在Ajax表单验证呼叫后调用

自定义正则表达式

jquery.validationEngine附带了很多预定义的表达式。正则表达式指定:

<input value="" class="validate[custom[email]]" type="text" name="email" id="email" />

请注意,选择器在翻译文件中标识给定的正则表达式,还标识其关联的错误提示消息和可选的绿色提示消息。

电话
具有可选国家/地区代码和扩展名的典型电话号码。请注意,验证是**放松**,请为您的特定国家添加额外的验证。

49-4312 / 777 777
+1(305)613-0958 x101
(305)613 09 58 Ext 101
3056130958
+33 1 47 37 62 24延伸3
(016977) 1234
04312 – 777 777
91-12345-12345
+58 295416 7216

URL.
matched a url such as http://myserver.com, //www.crionics.com or ftp://myserver.ws

电子邮件
简单,电子邮件:[email protected]

日期
一个ISO日期,YYYY-MM-DD

数字
具有可选标志的浮点。 IE。 -143.22或.77,但也+234,23

整数
包含可选标志的整数。 IE。 -635 +2201 738.

ipv4
IP地址(V4)IE。 127.0.0.1.

唯一onlynbersp.
只有数字和空格字符

众所周知Sp
只有字母和空间字符

众所周知Number
只有字母和数字,没有空间

在过溢出的div中使用发动机

此方法的大变化是通常该发动机将把每个错误框附加到身体。在这种情况下,它将在输入验证之前附加每个错误框。这增加了一点复杂性,如果您希望错误框正常行为,您需要将输入包裹在DIV中的位置相对,并完全包裹输入宽度和高度。最简单的方法是通过添加float:左,如在所提供的示例中。

自定义

没有定制的好图书馆是什么?

添加正则表达式

添加新的正则表达式很容易:打开您的翻译文件并向列表添加新条目

    "onlyLetter": {
        "regex": /^[a-zA-Z\ \']+$/,
        "alertText": "* Letters only"
    },

* “onlyLetter”是一个示例选择器名称
* “regex”是一个javascript正常表达
* “alertText”验证失败时是否要显示的消息

您现在可以使用新的正则表达式

<input type="text" id="myid" name="myid" class="validation[custom[onlyLetter]]"/>

大学教师’忘了贡献!

定制外观和感觉

编辑文件* validationeengine.jquery.css *并自定义样式表到您的相似之处。它’如果您知道CSS,则琐碎。

添加更多locales.

您可以通过拍摄* jQuery.ValidationEngine-en.js *作为示例,轻松添加区域设置。
随意分享翻译ðÿ〜‰

经验法则

* field.id是页面上的**唯一**
*出于简单性和一致性字段.ID和Field.Name应匹配(MincheckBox和MaxCheckBox验证器除外)
*在Field.id或Field.name中应避免空格或特殊字符.Name
*使用较低案例输入.Type IE。 *文本,密码,textarea,复选框,收音机*
*使用Ajax Validator最后一次。验证[自定义[次,长度[0,100],** ajax [ajaxnameCall] **]
*每个字段仅使用一个Ajax验证器!
* JSON服务应居住在同一台服务器上(或者您将进入浏览器安全问题)
* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> ajax. validations should use GET, the actual form post should use a POST request.

贡献

贡献s are always welcome, you may refer to the latest stable project at [GitHub](//github.com/posabsolute/jQuery-Validation-Engine)
We use [Aptana](http://www.aptana.com/) as a Javascript editor and the Rockstart JSLint & Closure plugins http://update.rockstarapps.com/site.xml

执照

根据麻省理工学院执照许可

作者

版权所有(c)2010 CEDRIC DUGAS
V2.0由Olivier Refalo重写


如果您喜欢并使用此脚本,请考虑为我买啤酒’廉价和一种简单的方法来回馈!





版本1.7.1在线
2010年10月20日,Release V1.7.1:jQuery 1.4.3的兼容性版本
2010年7月1日,v1.7发布:div溢出的支持+小修复到内联Ajax验证+小代码大修
2010年2月1日,版本v.1.6.3:来自论坛的错误文件+ exempstring规则添加,更新到jQuery 1.4
11月23日,发布v.1.6.2:通过ajax加载的bugfix脚本,
11月23日,版本v.1.6.1:重构,外部LoadValidation()是背部工作,现在全部加载语言,添加设置为不是取得成功的扰乱表单,
10月29日,版本v.1.6:unbind验证调用成功函数时,option returniSvalid添加
10月27日,版本v.1.5:添加调试模式,可以在设置和CakePhp纠正的CakePhp中指定事件触发器
9月17日,发布v.1.4:更多框架支持,使用Mincheckbox和MaxCheckbox更改
8月25日,发布v.1.3.9.6:ajax提交,提示定位,具有多种形式的错误校正
8月13日,版本v.1.3:ajax验证,提示可在插件外使用,次要CSS更正
7月12日,版本v.1.3:使用ID而不是名称,次要CSS校正,可选的内联验证验证。
6月5日,版本v.1.2.1:添加可选验证
6月5日,释放v.1.1.2:易于错误的ERG EX,在同一页面上用多种表格纠正错误
6月4日,版本v.1.1:添加日期验证并选择所需的验证,使用组无线电输入纠正错误
6月1日,释放v.1.0

评论由于数量压倒性而关闭,请使用论坛进行支持。

广告

成为Web开发专家 tesking. 使用自我节奏 tesking hp0-d07 学习指南 tesking 646-671. jQuery tutorials.

491 thoughts on “jQuery内联表单验证,因为验证是一团糟

  1. 您的电子邮件验证过于限制。有效的电子邮件地址可以包含+符号和其他字符。
    基于Gmail中的电子邮件的+关键字部分进行自动过滤,通常使用。
    前任。 [email protected]

  2. It’很好,但如果我禁用JavaScript怎么办?验证真的必须在服务器端进行,以便它工作。客户端只能提供帮助。

  3. @tony,这并不旨在取代服务器侧验证,

    这是指指导您的用户的好方法,或者如果您正在进行AJAX应用程序

  4. 爱它!做得好。我的一个警告是使用类属性。说,我认为的自定义属性会更好

    这样,您可以避免对类属性进行混乱,实际上它会在验证符号中为您提供更多的灵活性。我打赌它可以减少到这样的东西:

  5. @Trans,您无法将代码放入评论抱歉,自定义属性的问题是W3C将永远不会验证它们。

    我理解凌乱的问题,但这真的是我拍的HTML验证选择。我不’t说这是正确的选择,这是我的正确选择。

  6. 做得很好。感谢您对OpenSource World的贡献。

    我唯一的问题是:你能重新为CSS 2.1重新工作那些漂亮的模糊阴影吗?很高兴有CSS 3效应准备好,但我认为这将需要一些时间,直到他们将被广泛接受。

  7. @Serrre嗯,我可以,但我真的没有’T想要添加8个PNG,但是你不会难以在我觉得的CSS中添加它们

  8. 良好的形式验证。感谢分享。

    一点–国际化与本地化不同。本地化是字符串的翻译,调整UI的大小以满足产品的不同语言版本。国际化或全球化是您的代码支持多个输入/显示字符的能力,而是一个区域。

  9. 做得很好。感谢您对OpenSource World的贡献。

    但是,我错过了下拉框的验证和验证vor日期(dd.mm.jjjj)。有没有办法包括我的愿望?

  10. @maschi,这个周末应该验证日期验证,我对我的服务器有问题,并优化它需要太多时间..

    所需的选择是我的列表中,但我不能发布日期,应该不是太远

  11. 用于在Select Boxes上验证…

    只需在第191行后添加“:

    if (callerType == “select-one”) { // added by [email protected] for select boxes
    CallerName = $(来电).ATTR(“name”);

    if(!$(“select[name=”+callerName+”]”).val()) {
    isError = true;
    提示提示+ = setings.allrules [规则[i]]。AlertText +””;
    }
    }

    注意:选择框中的空选项必须具有值属性或赢取’t work.

    例子:
    选择一个

  12. 此外,您只需要添加;在线的末尾’让他们弥合它。记得在结束后}在函数之后,函数和IF语句之后。我的文件现在只是一行,6.2kb。

    顺便说一下,谢谢你的伟大插件。最佳验证插件i’ve seen so far.

  13. 哎呀,我猜你剥离了HTML,所以我的榜样没有’t work…

    让’s try again
    <option value=””>– Select One –&lt/option>

  14. NP。很高兴我可以贡献。一世’j query相当新的,所以类型(选择一对一)把我扔掉了。我没有’认为它是正确的,但它看起来就是这样。

  15. 抱歉,请忽略上面的内容。我刚看到保罗’s code and it’现在工作。谢谢。

  16. 有点侵入,可能是一个想法,可以选择仅显示错误的消息。

    此外,当您输入了几个字段并返回编辑前面的字段之一时,以前聚焦的字段的消息仍然显示,并且新集中的字段的消息’t.

  17. 伟大的插件
    但使用时出现问题
    ” [ ” ” ] ”

    名称属性中的字符,例如数据[name]。
    使用提到的字符时,错误工具提示不会消失。

  18. @sajid,真实你不能使用‘在名称输入中,我猜你可以刚才需要,这只是一个字母的示例。

  19. @cedric.

    我的意思是[]字符
    通常用于处理多个选择等

    从学习插件代码获得的是您使用的名称属性作为错误工具提示的类名,[和]字符不能通过$(“.”) function of jquery

    $(“.data [成员] [favs]”)不会返回任何东西,为什么

    $(“.”+ closingprompt).remove();未删除工具提示。

    虽然我确实更改了插件代码以使用输入元素’s id作为错误工具提示的类名,它有效

  20. 感谢提示,我在脚本中添加了正常选择广告多个选择,使用ID为多个选择

  21. 你好– Great Plugin!

    I’m遇到与粮食处的问题相同…我的表格中有现场阵列,例如,最终,>input name=”fname[]” …$ gt; ,休息jquery调用…我应该修改脚本以使用像CEDRIC这样的ID,或者您希望在不久的将来有一段官方发布修复吗?

    谢谢agin!

  22. rjking. 可以在线放置你的榜样,我已经使用ID纠正了多个选择中的行为,

    但是,最终我将不得不通过ID更改名称,因为我会打破与早期版本的HTML兼容性。

  23. 嗨Cedric-

    是的,不理想使用ID,但在我的情况下是必需的。我向你的代码做了12个编辑,并使其工作。现在,我仍然将验证规则添加到元素的类属性(如您的原始方法),但对于您的JS创建的新DIV,我切换到从表单元素的ID定义其类,所以所有我要做的就是确保那里’在我的表单中的每个元素上的唯一ID(当然是其中的’验证的问题)。我没有’T之前必然有一个ID分配给所有表单元素,所以这是我对我的代码所做的唯一修改。

    这里’S表单中的示例输入元素:

    <input type=”text” id=”field_id_42″ name=”EMP_ARRAY [6] [FNAME] []” class=”验证[必需,自定义[次次],长度[4,100]]” value=”James” />

    它现在适用于我对您的JS代码进行的修改(我可以向您发送我的修改,如果它有帮助)。

  24. P.S.–我刚才意识到我用你的名字,Cedric,在我的原始帖子中…ðÿ™,我的意思是我看到了萨吉的东西。

    无论如何,一个其他小章节,可能有意在你的地方,但是“onlyLetter” and “noSpecialCharacters” don’允许空间。自从使用正面表达以来,没有Biggie,但只是以为我’d share. Couldn’要弄清楚几分钟,为什么它没有’t like “John Smith”在名称字段中,与“onlyLetter” applied… kept telling me “Letters Only”… lol

评论被关闭。