MVC4文本框的圖形驗證

我在MVC4驗證中遇到了問題。目前，我使用validationMessageFor作爲錯誤消息。它不是很漂亮，所以我想改變我的驗證。我想做圖形驗證。例如，我想驗證電子郵件的條目形式。如果電子郵件有效，我的文本框將如下所示。 enter image description here MVC4文本框的圖形驗證

如果電子郵件是錯誤的，我想告訴用戶以下。 enter image description here

在MVC4中，是否可以這樣做？我應該如何根據圖片設計我的文本框？如何在文本框中添加刻度圖標和十字圖標以及信封圖標？如果電子郵件格式錯誤，如何填寫紅色？

感激的任何幫助，感謝

來源

2013-02-21 Dartfrog Imi

它是可能的。這與asp-mvc以及與'html/css/js'有關的所有內容都沒有關係。本文可能會幫助您開始：http://line25.com/tutorials/how-to-enhance-your-form-input-fields-with-jquery – gideon 2013-02-21 09:03:33

這是可能的，儘管它有一點做與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; 
}

來源

2013-02-21 09:19:10

嗨，我使用Html.TextboxFor，而不是「」如何我應該修改它嗎？ – 2013-02-21 09:52:42

我用ASP.NET MVC特定代碼更新了我的答案。 – 2013-02-21 10:25:05

MVC4文本框的圖形驗證

回答

相關問題