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>

转载于:https://blog.51cto.com/ourchoice/1948936