代码之家 › 专栏 › 技术社区 › Dartfrog Imi

文本框的MVC4图形验证

unobtrusive-validation jquery-validate asp.net-mvc css

0

Dartfrog Imi · 技术社区 · 12 年前

我在MVC4验证中遇到了一个问题。目前,我使用validationMessageFor来处理错误消息。它不是那么漂亮,所以我想改变我的验证。我想做图形验证。例如,我想验证输入表单中的电子邮件。如果电子邮件有效,我的文本框将如下所示。 enter image description here

如果电子邮件是错误的,我想向用户显示以下内容。 enter image description here

在MVC4中,有可能做到这一点吗?我应该如何根据图片设计我的文本框?如何在文本框中添加勾号图标和交叉图标以及信封图标?如果电子邮件格式错误,如何填充红色?

感谢您的帮助, 谢谢

1 回复 | 直到 12 年前

1

5

J.P. 12 年前

这是可能的,尽管它与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;
}