MVC4图形验证的文本框 [英] MVC4 graphical validation for text box

问题描述

我有一个问题在MVC4验证。目前，我使用validationMessageFor的错误消息。它不是那么美丽，所以我想改变我的验证。我想做图形验证。例如，我想在Entry表单中验证电子邮件。如果电子邮件有效，我的文本框将如下所示。

I got a problem in MVC4 validation.Currently, i use validationMessageFor for error message. It is not so beautiful so i want to change my validation. i want to do graphical validation. for example, i want to validate Email in Entry form. if the email is valid, my text box will look like the following.

if电子邮件是错误的，我想向用户显示以下内容。

if email is wrong, i want to show the user to following.

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

in MVC4, is it possible to do it? how should i design my text box to get according to the picture? how to add tick icon and cross icon in text box as well as envelope icon? how to fill red color if email is wrong format?

感谢任何帮助，
感谢

appreciate for any help, thanks

推荐答案

这是可能的，虽然它与ASP.NET MVC没有什么关系。让你的网页看起来很漂亮是一个CSS（它存在于客户端），而不是MVC（它存在于服务器上）。

That's possible, though it has little to do with ASP.NET MVC. Making your webpages look pretty is a job for CSS (which lives on the client), not for MVC (which lives on the server).

你的CSS看起来像这个：

Your CSS would look something like this:

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 类开箱即用。如果你有这个工作，然后再次应用它有效的状态不应该更多的努力。

You yourself will have to mark the element as invalid. From the top of my head, I believe the jQuery Validation plugin shipped with MVC4 uses the .input-validation-error class out-of-the-box. If you've got this working, then applying it again for a valid state shouldn't be much more effort.

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

One more thing. Note that this example uses multiple backgrounds on an element. This is a CSS3 feature and older browsers don't support this.

* 更新

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

Specific to ASP.NET MVC, here's how to generate the field:

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

看起来很漂亮：

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;
}

这篇关于MVC4图形验证的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！