0

可能重复：
如何使用 Twitter Bootstrap 弹出框进行 jQuery 验证通知？

一段时间以来，我一直在我的项目中使用 twitter bootstrap。在我当前的所有用例中，表单提交导致到服务器的完整往返......即没有ajax。因此，在 div 和 'help-inline' spans 及其文本上插入 'error' 类对我来说相当简单。

现在我正在重构以尽可能支持 ajax。

现在，当提交表单时，根据服务器的响应，我必须添加“错误”并为跨度设置文本。我创建了一个 jsfiddle ( http://jsfiddle.net/kinjal/ja9gA/35/ ) 来展示这一点。

重复单击注册按钮会随机点亮电子邮件和/或密码 div。这是有效的……至少它看起来有效。随机部分是模拟向服务器提交并从那里接收错误。

代码结构如下：

clear the state (remove error class, reset help text, hide help)
send data to server
if any errors show the errors (add error class, add help text, show help)

这里的一个问题是，当字段数增加时，这段代码会变长。

是否还有其他问题，是否有更好的方法来做到这一点？

建议可以包括来自服务器的响应格式，以使解析/处理更容易。

4

1 回答 1

0

我强烈建议您使用jquery validate来完成您的工作。您说得对，您拥有的代码字段越多，您当前处理它的方式可能会变得混乱。

包含 jquery validate 后，您可以简单地添加基于类名的规则。例如你可以拥有。

<input name="email" class="required" />

在您的提交按钮上，在将其发送到服务器之前，您只需执行以下操作即可检查表单是否有效

if($('#registerform').valid()) //returns true/false

jquery validate 带有一些基本的验证方法（电子邮件验证就是其中之一）

所以你可以做

<input name="email" class="required email" />

这将确保该字段不为空，并且在将其提交到服务器之前它是有效的电子邮件地址。

如果您需要创建更多自定义方法，您可以选择基于类添加更多验证。

在密码强度的情况下，看起来jquery validate 也有一个你可以添加的方法来处理它。

于 2012-08-11T08:15:35.400 回答