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