jQuery - 实时验证插件

Posted

技术标签:

【中文标题】jQuery - 实时验证插件【英文标题】:jQuery - Live Validation Plug-ins 【发布时间】:2010-09-17 13:42:36 【问题描述】:

我正在寻找一个 jQuery 插件,它可以在按键被按下和失去焦点后进行验证(文本框)。

我目前正在使用jVal - jQuery Form Field Validation Plugin。它工作得很好。我唯一的问题是我只能使用通用错误消息。

例如: 我需要一个介于 2 到 5 个字符之间的字符串。如果它太短,我想显示一条错误消息,指示它太短,同样如果它太长。我知道我可以显示一条错误消息,要求字符串在 2 到 5 个字符之间。 正在进行的验证更加复杂。

其他验证器的任何想法或我如何使用此插件来显示独特的错误消息。


编辑:

验证工具需要阻止特定的字母或数字,并且不需要表单。

谢谢

【问题讨论】:

【参考方案1】:

这个看起来很符合你的描述:

jQuery plugin:validation (Homepage) demo API docs

这是从演示源复制的代码的 sn-p:

// validate signup form on keyup and submit
$("#signupForm").validate(
    rules: 
        firstname: "required",
        lastname: "required",
        username: 
            required: true,
            minlength: 2
        ,
        password: 
            required: true,
            minlength: 5
        ,
        confirm_password: 
            required: true,
            minlength: 5,
            equalTo: "#password"
        ,
        email: 
            required: true,
            email: true
        ,
        topic: 
            required: "#newsletter:checked",
            minlength: 2
        ,
        agree: "required"
    ,
    messages: 
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname",
        username: 
            required: "Please enter a username",
            minlength: "Your username must consist of at least 2 characters"
        ,
        password: 
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        ,
        confirm_password: 
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long",
            equalTo: "Please enter the same password as above"
        ,
        email: "Please enter a valid email address",
        agree: "Please accept our policy"
    
);

【讨论】:

【参考方案2】:

试试这个:

http://www.geektantra.com/2009/09/jquery-live-form-validation/

【讨论】:

【参考方案3】:

对我来说最好的是http://livevalidation.com/ 或者来自baseassistance http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jVal 和 live-form-validation 可以,但我认为使用 gjQuery 的全部意义在于使用干净、通畅的代码,而且它们需要大量的混乱,这对我来说不是一个选择。

我猜 live-form-validation 将在未来发展,真的很奇怪必须输入整个正则表达式来验证每个表单中的电子邮件......

【讨论】:

【参考方案4】:

我使用了 jQuery 插件:验证。它非常适合动态创建 DOM 元素。在动态创建它们时,请确保包含属性名称和 ID。我很确定插件使用 name 属性在 html 中找到它们。如果名称丢失,则无法找到。

这可能是另一个很好的验证工具。 http://www.livevalidation.com

【讨论】:

据我所知 Livevalidation 使用内联 javascript - 不酷!另外,我认为在某些情况下,如果您在人们有机会完成表单之前给他们一条错误消息,可用性就会受到影响。【参考方案5】:

在 jVal 0.1.4 的当前主干中,它可以处理比以前版本更强大的错误检查功能,允许您将字符串作为错误消息返回。在http://jquery-jval.googlecode.com/svn/trunk/jVal.js获取当前修订版 11 jVal 0.1.4 主干

下面是一个用于检查的密码字段示例:

    如果密码包含 8 个或更多字符 如果密码至少包含一个数字字符 如果密码包含至少一个以上的字母字符

如果未通过特定检查,它将显示自定义消息

<input id="web_pswd" type="password" size="20"
    jVal="valid:function (val)  if ( val.length < 8 ) return '8 or more characters required'; else if ( val.search(/[0-9]/) == -1 ) return '1 number or more required'; else if ( val.search(/[a-zA-Z]/) == -1 ) return '1 letter or more required'; else return ''; , styleType:'pod'"

【讨论】:

以上是关于jQuery - 实时验证插件的主要内容,如果未能解决你的问题,请参考以下文章

Jquery 实时验证

jQuery基础学习06 jQuery表单验证插件-Validation

表单验证提示插件validate

validate验证

jquery的表单验证插件怎么验证身份证号

jQuery插件 -- 表单验证插件jquery.validate.js