jQuery - 实时验证插件答案

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

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

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

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

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

编辑：

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

谢谢

【问题讨论】：

标签： jquery validation plugins

【解决方案1】：

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

这是从演示源复制的代码的 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'}"

【讨论】：