文本框的 MVC4 图形验证

Question

我在 MVC4 验证中遇到问题。目前，我使用 validationMessageFor 获取错误消息。它不是那么漂亮，所以我想改变我的验证。我想做图形验证。例如，我想验证输入表单中的电子邮件。如果电子邮件有效，我的文本框将如下所示。

如果电子邮件是错误的，我想显示用户关注。

在 MVC4 中，可以做到吗？我应该如何设计我的文本框以根据图片获得？如何在文本框中添加刻度图标和十字图标以及信封图标？如果电子邮件格式错误，如何填充红色？

感谢任何帮助， 谢谢

Answer 1

这是可能的，尽管它与 ASP.NET MVC 关系不大。让您的网页看起来漂亮是 CSS（位于客户端）的工作，而不是 MVC（位于服务器上）的工作。

你的 CSS 看起来像这样：

input[type="email"] {
    background: url('images/envelope.png') no-repeat center left 5px;
    padding-left: 50px; /* depends on width of envelope image */
}
input[type="email"].input-validation-error {
    background: url('images/envelope.png') no-repeat center left 5px, url('images/cross.png') no-repeat center right 5px;
}

还有你的 HTML：

<input type="email" />

您必须自己将元素标记为无效。在我看来，我相信 MVC4 附带的 jQuery Validation 插件使用了开箱即用的 .input-validation-error 类。如果您已经完成了这项工作，那么再次将其应用到有效状态应该不会更费力。

还有一件事。请注意，此示例在一个元素上使用了多个背景。这是一项 CSS3 功能，旧版浏览器不支持此功能。

*更新

特定于 ASP.NET MVC，这里是如何生成字段：

@Html.TextBoxFor(model => model.Email, new { @class = "email" })

这是使它看起来更漂亮的 CSS：

input.email {
    background: url('images/envelope.png') no-repeat center left 5px;
    padding-left: 50px; /* depends on width of envelope image */
}
input.email.input-validation-error {
    background: url('images/envelope.png') no-repeat center left 5px, url('images/cross.png') no-repeat center right 5px;
}