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