css - 文本框的 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;
}