1.创建Model,添加标注。
[Serializable]
public class BaseUserModel:BaseModel
{
[StringLength(100)]
[Required(ErrorMessage = "User Name can not be empty")]
public string UserName { get; set; }
}
2.controller中action传Model到razor页面
public ActionResult Create()
{
BaseUserModel model = new BaseUserModel();
return View(model);
}
public ActionResult Create(BaseUserModel editViewModel)
{
if (ModelState.IsValid)
{...............}
return View(model);
}
3.razor页面验证数据
@using (Html.BeginForm("Edit", "BaseUser", FormMethod.Post, new { id = "editBaseUser_Form", enctype = "multipart/form-data" }))
{
.....
@Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", @maxlength = "50" } })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
....
}
var $form = $("#editBaseUser_Form");
var url = $form.attr("action");
var formDatas = $form.serializeJSON();
$form.removeData("validator");//必须写这个,不然第一次表单数据为空时,点击提交按钮,不会被Validation组件检测到,会被提交到服务器
$form.removeData("unobtrusiveValidation");//必须写这个,不然第一次表单数据为空时,点击提交按钮,不会被Validation组件检测到,会被提交到服务器
$.validator.unobtrusive.parse($form);//重新对控件进行验证
var bool = $form.validate().form();
if (bool) {
post(url, formDatas, function (data) {
if (data.Status == 200) {}
}
//易错总结
页面加载后运行此代码
$(function() {
$.validator.unobtrusive.parse($("form"));
});
原因:
页面加载后unobtrusive已对各标签的验证状态进行保存,页面局部加载后并不会导致unobtrusive重新对页面的控件进行验证并保存前状态,导致新页面无法进行验证。
原理:
注意看jquery.validate.unobtrusive源码最后一段:
$(function () {
$jQval.unobtrusive.parse(document);
});
jquery.validate.unobtrusive在页面加载后响应并运行上面代码,解析页面中data-val-*属性的标签,检验其验证规则。
局部刷新或加载页面后,jquery.validate.unobtrusive无法对新加入的标签进行data-val-*属性的过滤,导致验证失效。
解决:
$(function() {
$.validator.unobtrusive.parse($("form"));
});
调用上面代码,使unobtrusive重新对控件进行验证