asp.net mvc js validate 客戶端驗證美化

asp.net mvc  js  validate  客戶端驗證美化

首先,mvc的客戶端驗證用的是jquery.validate.js, jquery.validate自己已經提供了很好的擴展功能,經過簡單點配置就能夠作得更好看些.

而Microsoft經過jquery.validate.unobtrusive.js而後作了封裝,讓它高度的集成到了MVC中.

此次,咱們經過對jquery.validate.unobtrusive.js作一點小小的修改,讓這個驗證效果看起來更漂亮一點.

同時也讓你們對jquery.validate.unobtrusive.js瞭解的更多一點,但願可以給你們起到觸類旁通的效果.

 

咱們先來看看修改後的效果:

1.初始狀態

2.驗證失敗

3.驗證成功

 

 

1.首先對CSS作一點點小修改(注意紅色字部分),

代碼以下:

 .field-validation-error {
    color: #f00;
    background: url(onError.gif) left center no-repeat;
    padding-left: 20px;
}

.field-validation-success {
    display: inline;
    padding-left: 20px;
    background: url(onCorrect.gif) left center no-repeat;
}

 2.修改jquery.validate.unobtrusive.js

在onError方法中:

把

container.removeClass("field-validation-valid").addClass("field-validation-error");

改爲

container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");

    function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

        container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
        }        else {
            error.hide();
        }
    }

 

在onSuccess方法中:

把

container.addClass("field-validation-valid").removeClass("field-validation-error");

改爲

container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");

    function onSuccess(error) {  // 'this' is the form element
        var container = error.data("unobtrusiveContainer"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;        if (container) {
            container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");
            error.removeData("unobtrusiveContainer");            if (replace) {
                container.empty();
            }
        }
    }

文章咱們演示了經過對jquery.validate.unobtrusive.js作點小修改，如何給MVC的驗證添點花

 

主要仍是修改了onError與onSuccess中的這兩個方法

這兩個方法也是用來顯示/隱藏驗證信息的關鍵代碼

我根據本身的理解，把這兩個方法加上了詳細的中文註釋

請你們多多指正:

 

 //每次執行完驗證的時候，都會來這裏(不論成功或失敗)
    //在這裏能夠控制驗證提示消息的顯示或隱藏
    //error:包含驗證提示消息的標籤,是一個Jquery對象
    //若是驗證經過的話是這樣子:<span for="UserCode" generated="true"></span>
    //若是驗證經過的話是這樣子:<span for="UserCode" generated="true">UserCode 字段是必需的。</span>
    //inputElement:當前被驗證的input控件
    function onError(error, inputElement) {  // 'this' is the form element
        //首先查到顯示驗證提示信息的容器,
        //通常是這樣子:<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="true"></span>
        //replace:這個值用來判斷容器內的值是否須要被替換
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;        //顯示容器
        container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");        //把容器跟本次的驗證提示信息關聯起來(success中會用到)
        error.data("unobtrusiveContainer", container);        if (replace) {            //清空容器內容，            container.empty();            //而後把本次的提示信息添加到容器中,並清除提示信息的class
            //注意:若是驗證經過的話，還會調用success方法,在success方法中會清空container
            error.removeClass("input-validation-error").appendTo(container);
        }        else {            //不清空容器，只是隱藏容器中的驗證提示信息            error.hide();
        }
    }

 

//驗證經過後，來這裏
    //error:驗證經過後的提示信息,其實就是<span for="UserCode" generated="true"></span>,跟onError中上的error是同一個東西
    function onSuccess(error) {  // 'this' is the form element

        //獲取容器(在onError中已經放進error.data中了)
        var container = error.data("unobtrusiveContainer"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;        if (container) {            //隱藏容器
            container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");            //移除容器跟提示信息的關聯
            error.removeData("unobtrusiveContainer");            if (replace) {                //清除容器                container.empty();
            }
        }
    }

 

上面有個變量replace變量我沒有解釋,如今在這裏單獨說一下:

咱們在view中用@Html.ValidationMessageFor方法生成顯示驗證消息的容器時，注意一下第二個參數

若是不帶第二個參數

@Html.ValidationMessageFor(model => model.UserCode)

生成的html是這樣子的,這是一個空容器

<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="true"></span>

 

若是傳入第二個參數

 

@Html.ValidationMessageFor(model => model.UserCode, "請輸入用戶名")

 

生成的htm是這樣子的,再也不是空容器了,在驗證不經過的時候，會直接顯示容器裏面的信息而忽略Model中定義的驗證信息

 

<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="false">請輸入用戶名</span>