小修改,讓mvc的驗證錦上添點花(1)

首先,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();
            }
        }
    }

3.OK,搞定.

 

請關注"小修改,讓mvc的驗證錦上添點花(2)"