0

MVC4 の検証で問題が発生しました。現在、エラー メッセージには validationMessageFor を使用しています。あまり美しくないので、検証を変更したいと思います。グラフィカルな検証を行いたい。たとえば、入力フォームのメールを検証したい。電子メールが有効な場合、テキスト ボックスは次のようになります。 ここに画像の説明を入力

メールが間違っている場合は、次のユーザーに表示したい。 ここに画像の説明を入力

MVC4では、それを行うことは可能ですか? 写真に合わせてテキストボックスをデザインするにはどうすればよいですか? 封筒アイコンだけでなく、テキストボックスにチェックマークとクロスアイコンを追加するにはどうすればよいですか? 電子メールの形式が間違っている場合に赤い色を塗りつぶす方法は?

助けてくれてありがとう、ありがとう

4

1 に答える 1

5

それは可能ですが、ASP.NET MVC とはほとんど関係ありません。Web ページの見栄えを良くすることは、MVC (サーバー上にある) ではなく、CSS (クライアント上にある) の仕事です。

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;
}
于 2013-02-21T09:19:10.990 に答える