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

问题描述

我在MVC4 validation.Currently一个问题，我使用validationMessageFor的错误消息。所以我想改变我的验证它是不是很漂亮。我想要做的图形验证。例如，我要验证在报名表的电子邮件。如果电子邮件是有效的，我的文本框看起来像下面这样。

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 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?

AP preciate任何帮助，
谢谢

appreciate for any help, thanks

推荐答案

这是可能的，尽管它有一点做与ASP.NET MVC。让您的网页看起来pretty为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验证插件使用了。输入验证错误类外的开箱。如果你有这方面的工作，然后再应用它一个有效的状态不应该是更多的努力。

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" })

和这里的CSS，使它看起来pretty：

And here's the CSS to make it look pretty:

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屋！