1、前端引入3个脚本
①jq脚本 ②jQuery.Validate.js ③jquery.validate.unobtrusive.js(异步验证)
2、后端加特性
在表对应的Model层里面,为属性加特性,常用的特性:
[Required]表示该属性是必须要填的,不能为null。
[StringLength]可以限制属性的长度大小。
[Range]、[RegularExpression]
3、后端使用方法
使用ErrorMessage自定义错误提示信息,要引入命名空间using System.ComponentModel.DataAnnotations。
[Required(ErrorMessage = "角色名称不能为空")] [StringLength(10, MinimumLength = 2, ErrorMessage = "角色名称{2}~{1}个字符")]
4、前端使用方法
前端为了能够显示错误信息,使用Html.ValidationMessageFor(m => m.Name) 来显示,表示为Name属性显示错误信息。
增加完特性,前端代码input标签里面会出现data-val="true" data-val-required="名字不能为空",这2个属性。
通过查看页面源代码比较得知,只要在前端为input标签加入下面属性以及span标签(目的是显示错误信息),不需要在后端加[Required]特性也可以实现同样的效果。
此时注意input要加name属性,span标签中的data-valmsg-for要用到。
<input type="text" name="name2" data-val="true" data-val-required="名字不能为空" /><span class="field-validation-valid" data-valmsg-for="name2" data-valmsg-replace="true"></span>
5、顺便说下@Html.DisplayNameFor(..)
在后端为属性加[Display(Name = "测试")]这个特性,前端就可以使用Html.DisplayNameFor显示label标签。
注意:前端的代码要放在表单里面,只有在点击提交的时候才会检测,当不符合要求时,表单不会提交,这是会出现错误信息。