MVC中使用Validate的驗證，要修改錯誤提示樣式一共有3處需要修改，否則就不太完美了；

　　MVC中的Validate的驗證機制只用在后臺寫一次，就可以完成前臺和后臺的完美驗證，前臺的驗證主要是依靠Validate.js來完成，Validate只是作為一個驗證插件，但是錯誤提示是靠微軟的jquery.validate.unobtrusive.js這個js來完成，但是他只負責給錯誤的邊框加上紅色，且在后面出現一個span來顯示，有時候會撐壞布局；

　　可以使用自定義的驗證提示來做到比原始驗證漂亮的驗證提示；

　　先是找到一款tip提示的插件，有事件和方法進行tip提示的代碼控制顯示和隱藏及銷毀即可；poshytip：http://vadikom.com/demos/poshytip/# 還算不錯，基本可以滿足要求；

　　MVC的強類型提交表單處理好之后：

public class MemberUser{[Required(ErrorMessage="用戶名不能為空")]public string UserName { get; set; }[Required(ErrorMessage = "密碼不能為空")]public string PassWord { get; set; }}

　　

???? 頁面代碼：

@using (Ajax.BeginForm(new AjaxOptions { Url = "/Home/SaveMemberUser/" })){@Html.ValidationSummary(true)<table><tr><td style="width:80px;text-align:right;">用戶</td><td style="width:200px">@Html.TextBoxFor(m => m.UserName)@Html.ValidationMessageFor(m=>m.UserName)</td></tr><tr><td style="width: 80px; text-align: right;">密碼</td><td style="width:200px">@Html.TextBoxFor(m => m.PassWord)@Html.ValidationMessageFor(m => m.PassWord)</td></tr><tr><td colspan="2" style="text-align:center"><input type="submit" value="提交" /></td></tr></table>} View Code

?

　　注：ValidationMessageFor是必須得，因為錯誤提示的跟蹤點是在ValidationMessageFor生成的span上進行的；jquery、validate、validate. Unobtrusive這幾個js是必須得；

?

　　我們只需要將validate.unobtrusive中進行錯誤消息提示時進行攔截即可；每次錯誤提示都會觸發validate.unobtrusive中的onError事件；我們改寫如下就可以：

function onError(error, inputElement) { // 'this' is the form elementvar container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),replaceAttrValue = container.attr("data-valmsg-replace"),replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;//addvar $customErrorTip = container.attr("data-forerrortip");container.removeClass("field-validation-valid").addClass("field-validation-error");error.data("unobtrusiveContainer", container);//addvar elem = $("#" + inputElement[0].name.replace(".", "_"));//添加提示消息if (replace) {container.empty();//add startif (error.html() != "") {if ($customErrorTip) {$("#" + $customErrorTip).poshytip("destroy");} else {elem.poshytip("destroy");}var direction = "right";//左邊+元素寬+提示的文字+提示兩邊的空白if ((elem[0].offsetLeft + elem.width() + error.length * 10 + 20) > $(document).width()) {direction = "left";}var errorConfig = {content: error,alignTo: 'target',alignX: direction,alignY: 'center',showOn: 'none',bgImageFrameSize: 7,offsetX: 5};if ($customErrorTip) {$("#" + $customErrorTip).poshytip(errorConfig).poshytip('show');} else {elem.filter(':not(.valid)').poshytip(errorConfig).poshytip('show');}} else {if ($customErrorTip) {$("#" + $customErrorTip).poshytip("destroy");} else {elem.poshytip("destroy");}}//add end//update disable//error.removeClass("input-validation-error").appendTo(container); }else {error.hide();}} View Code

　　效果圖：

　　到此就完了嗎？在此錯誤提示，在鼠標離開或切換的時候，切實可以進行相應的錯誤提示；

　　現在需求變了，如果是很多單選按鈕組，需要至少選中一個怎么辦了？如果不作任何修改，默認會在第一個按鈕上tip提示為必填項，顯然不能100%表達我們的意思；在上面的onError的js中，我判斷了data-forerrortip這個屬性，用法如下：

<span id="groupRadioError" style="vertical-align:middle;line-height:70px;">&nbsp;</span>@Html.ValidationMessageFor(m => m.Option, "", new{data_forErrorTip="groupRadioError" })

　　我定義一個空的span位置定義為自定義的位置，然后在ValidationMessageFor的時候加入一個自定義屬性，指向我加入的空span的id，[有點label-for的意思],然后對比我們上面寫的onError的js比較，意思就是錯誤的指向不是錯誤本身的元素對象而是data-forerrortip屬性指向的id的元素進行錯誤提示

　　到目前為止，你任務提示完了嗎？這只是進行了一半了，MVC是前臺和后臺可以同時驗證的，現在說的都只是前臺進行的驗證，如果后臺驗證有錯誤咋辦？仔細觀察幾遍，如果后臺有錯誤，在Response的時候，是直接把錯誤放在span中給顯示出來的；現在可以將validate、validate.unobtrusive注釋掉，并且不采用ajax提交，注釋掉ajax提交的js[jquery.unobtrusive-ajax],表單改為

@using (Ajax.BeginForm("SaveMemberUser", new { id = "Add" }, new AjaxOptions { Url = "/Home/SaveMemberUser/" })) { }

　　如此這般，空表單直接提交，就完全沒看到tip的提示效果，因為有tip的提示已經被我們注釋掉了；剛說到，span的錯誤是直接Response出來的

　　這樣我們可以在頁面剛加載完后就去找class為field-validation-error的樣式進行each就可以了:

?

$(function () {$(".field-validation-error").each(function () {var $this = $(this);var thisid = $this.attr("data-valmsg-for").replace(".", "_");var direction = "right";// 左邊+元素寬+提示的文字+提示兩邊的空白if (($this[0].offsetLeft + $this.width() + $this.text().length * 10 + 20) > $(document).width()) {direction = "left";}$this.hide();setTimeout(function () {$("#" + thisid).poshytip({content: $this.text(),alignTo: 'target',alignX: direction,alignY: 'center',showOn: 'none',offsetX: 5}).poshytip('show');}, 100);}); }); View Code

　　使用setTimeout來控制顯示的原因，是因為在使用$();加載的時候，元素已經加載了，但元素的位置信息還未完成初始化，所以tip的位置不正確;還有一點，就是在tip提示的時候進行窗口的大小的拖動會導致tip的提示的延遲位置定位，及時拖動定位可以設置[refreshAniDuration:0]即可

?

小知識：

　　在進行監聽$(window).resize(function(){dowork()}); 這樣就會在整個拖動過程中導致dowork函數會被執行N次，顯然我們只是想在拖動大小完成的時候執行一次就夠了；可以用到事件的延遲執行，setTimeout;

?

function throttle(method, context) {clearTimeout(method.tId);method.tId = setTimeout(function () {method.call(context);}, 100);}

?

使用的時候 $(window).resize(function(){ throttle(dowork) }) 構建一個執行順序,如果100內,有等待的,則取消,重新加載新的,這樣只會在最后一次執行,當然你得控制事件間隔;

轉載于:https://www.cnblogs.com/RegicideGod/p/3466888.html

總結

以上是生活随笔為你收集整理的MVC与Validate验证提示的样式修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。