MVC中,实现了前端后端的验证。
前端验证。步骤:
web.config这两个得开启:
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
JS设置
第一步:引入页面js
@Scripts.Render("~/bundles/jqueryval")
第二步:BundleConfig类,得有
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
也就是这三个js
前端验证,在MVC中的实现:
在Model上面加一些特性,都在System.ComponentModel.DataAnnotations中,比如Required range等。
MVC中的HtmlHelp会分析这些特性,加载一下data-XX.
比如:
[Required]
public string Gender { get; set; }
@Html.EditorFor(x => x.Gender)
生成的html
<input class="text-box single-line" data-val="true" data-val-required="Gender 字段是必需的。" id="Gender" name="Gender" type="text" value="">
然后根据相关JS自动实现前端验证。
服务器端验证:
在mvc中的实现:在Model上面加一些特性,都在System.ComponentModel.DataAnnotations中,比如Required range等。
[HttpPost]
public ActionResult CreateStudent(StudentViewModel model)
{ ModelState.AddModelError("A", "AAAAA");
ModelState.AddModelError("B", "BBBBB");
ModelState.AddModelError("C", "CCCCC");
ModelState.AddModelError("D", "DDDDD"); return View();
}
在ModelBinder过程中,开启了服务器端的验证。同时把验证不通过信息以键值对的方式,传值给ModelState中
错误信息的呈现:
@Html.ValidationSummary(false)
是否隐藏错误信息:false即不隐藏错误信息,true即隐藏错误信息
@Html.ValidationMessageFor(x => x.Name)
@Html.ValidationMessage("Name")
第一个是lamda表达式,第二个是一般形式,作用是一样的。
都是呈现对应错误的(根据key,呈现对应的value)
自定义ValidationAttribut(仅针对服务器端的验证)
1:针对一个属性
新建类MyValidationAttribute,继承ValidationAttribute
public class MyValidationAttribute : ValidationAttribute
{
public MyValidationAttribute()
{
ErrorMessage = "The Name Must be Zhangsan";
}
public override bool IsValid(object value)
{
if (value==null)
{
return false;
}
string result = value.ToString();
//判断是否有值
if (string.IsNullOrEmpty(result))
{
return false;
} if (result=="Zhangsan")
{
return true;
} return false;
}
}
应用:
public class StudentViewModel
{
public string ID { get; set; }
[MyValidationAttribute]
public string Name { get; set; }
[Required]
public string Gender { get; set; }
}
View:
<div>
@using (Html.BeginForm())
{
@Html.ValidationSummary(false)
<fieldset>
<legend>UserInfo</legend>
<div class="editor-label">
@Html.LabelFor(x => x.Name)
</div>
<div class="editor-field">
@Html.EditorFor(x => x.Name)
@Html.ValidationMessageFor(x => x.Name)
@Html.ValidationMessage("Name")
</div> <div class="editor-label">
@Html.LabelFor(x => x.Gender)
</div>
<div class="editor-field">
@Html.EditorFor(x => x.Gender)
@Html.ValidationMessageFor(x => x.Gender)
</div>
</fieldset>
<input type="submit" value="提交" />
}
</div>
效果:
2:复杂的业务逻辑
类StudentViewModel继承接口 IValidatableObject
public class StudentViewModel: IValidatableObject
{
public string ID { get; set; }
[MyValidationAttribute]
public string Name { get; set; }
[Required]
public string Gender { get; set; } public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
if (!string.IsNullOrEmpty(Name))
{
if (Name=="Zhangsan" && Gender=="Nan")
{
yield return new ValidationResult("Zhangsan and Gender is Nan,Which is wrong!");
}
}
}
}
效果图:
源码: http://pan.baidu.com/s/1pKDMgDd