jQuery - 实时验证插件

jQuery - Live Validation Plug-ins

提问by Brad8118

I'm looking for a plugin for jQuery that can validate as a key is pressed and after it loses focus (text boxes).

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

I'm currently using jVal - jQuery Form Field Validation Plugin. It works pretty good. The only issue I have is that I can only use a generic error message.

我目前正在使用jVal - jQuery 表单字段验证插件。它工作得很好。我唯一的问题是我只能使用通用错误消息。

For example: I need a string to between 2 and 5 characters. If its too short I would like to display an error message that indicates it to short, equally if its too long. I know I could display an error message that requires the string to between 2 and 5 characters. The validation that is being done is more complicated.

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

Any ideas of other validators or how I could use this plug-in to display unique error messages.

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

---

---

Edit:

编辑：

The validation tool needs to prevent particular letters or numbers and not require a form.

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

Thanks

谢谢

回答by hasseg

This one looks like it would fit your description:

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

• jQuery plugin:validation (Homepage)
• demo
• API docs

• jQuery 插件：验证（主页）
• 演示
• API 文档

Here's a snippet of code copied from the source of the demo:

这是从演示源中复制的一段代码：

// 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"
    }
});

回答by GeekTantra

Try this:

尝试这个：

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

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

回答by user14169

for me the best would be http://livevalidation.com/or the one from baseassistance http://bassistance.de/jquery-plugins/jquery-plugin-validation/

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

jVal and live-form-validation can be ok, but I think the whole point of usin gjQuery is to use clean unobstructive code, and they require so much mess it's not an option for me.

jVal 和 live-form-validation 可以，但我认为使用 gjQuery 的全部意义在于使用干净的无障碍代码，它们需要如此混乱的代码，这对我来说不是一个选择。

I guess live-form-validation will evolve in the future, really weird to have to type thw whole regular expression to validate an email in each form....

我猜实时表单验证会在未来发展，不得不输入整个正则表达式来验证每个表单中的电子邮件真的很奇怪......

回答by Brad8118

I've use jQuery plugin:validation. it works pretty with creating DOM elements on the fly. When creating them on the fly make sure the attributes name and ID are included. I'm pretty sure the plugin uses the name attribute to find them in the html. If the name is missing they can't be found.

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

Also this might be another good validation tool. http://www.livevalidation.com

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

回答by Brad8118

In the current trunk of jVal 0.1.4 it can handle a little more robust error checking functionality than previous versions allowing you to return strings as the error message. Fetch the current revision 11 jVal 0.1.4 trunk at http://jquery-jval.googlecode.com/svn/trunk/jVal.js

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

Here's an example of a password field that will check for:

以下是将检查的密码字段示例：

1. If the password has 8 chars or more
2. If the password has at least one numeric character
3. If the password has at least one of more alpha character

1. 如果密码有 8 个字符或更多
2. 如果密码至少有一个数字字符
3. 如果密码至少有一个或多个字母字符

It will display a custom message if it fails a specific check

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

<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'}"