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 - 实时验证插件的主要内容,如果未能解决你的问题,请参考以下文章