mvc 验证html,mvc的验证

上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改，如何给MVC的验证添点花

主要还是修改了onError与onSuccess中的这两个方法

这两个方法也是用来显示/隐藏验证信息的关键代码

我根据自己的理解，把这两个方法加上了详细的中文注释

请大家多多指正:

//每次执行完验证的时候，都会来这里(不论成功或失败)

//在这里可以控制验证提示消息的显示或隐藏

//error:包含验证提示消息的标签,是一个Jquery对象

//如果验证通过的话是这样子:

//如果验证通过的话是这样子:UserCode 字段是必需的。

//inputElement:当前被验证的input控件

function onError(error, inputElement) { //'this' is the form element

//首先查到显示验证提示信息的容器,

//一般是这样子:

//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:验证通过后的提示信息,其实就是,跟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是这样子的,这是一个空容器

如果传入第二个参数

@Html.ValidationMessageFor(model => model.UserCode, "请输入用户名")

生成的htm是这样子的,不再是空容器了,在验证不通过的时候，会直接显示容器里面的信息而忽略Model中定义的验证信息

请输入用户名

现在一目了然了吧.