MVC学习笔记（五）—DataValidation
MVC 学习笔记（五）—— Data Validation
在实际应⽤中，我们需要对数据进⾏增查改删业务，在添加和修改过程中，⽆论你编写什么样的⽹页程序，都需要对⽤户的数据进⾏验证，以确数据的有效性和完整性。⽬前我们可以使⽤Bootstrap Validation对画⾯进⾏前端验证，我们先来看⼀下这种验证⽅式。
⼀、Bootstrap Validation
使⽤⽅式：
1. 引⽤js库
<link href="~/bower_components/bootstrap-validation/css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="~/bower_components/bootstrap-validation/js/bootstrapValidator.min.js"></script>
2. 在页⾯中对validation进⾏初始化
<div class="modal-content">
<div class="modal-header">
<button type="button" class="clo" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
新增
</h4>
</div>
<div class="modal-body">
<div class="row clearfix">
@using (Html.BeginForm("Save", "Client", FormMethod.Post, new { @id = "frmClient" }))
{
<div class="form-group">
@Html.Hidden("Id")
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="CardNo" class="control-label">卡号 <span >*</span></label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="CardNo" id="CardNo">
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="UrName" class="control-label">会员名 <span >*</span></label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" autocomplete="off" name="UrName" id="UrName">
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="Sex" class="control-label">性别 <span >*</span></label>
</div>
<div class="col-sm-8">
@Html.DropDownListFor(model => model.Sex, ViewBag.GenderList as IEnumerable<SelectListItem>, new { @class = "form-control textbox input-sm" })
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="BirthdateText" class="control-label">出⽣⽇期 <span >*</span></label>
</div>
<div class="col-sm-8">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
@Html.TextBoxFor(model => model.BirthdateText, new { @class = "form-control datepicker", @type = "text", @autocomplete = "off" })
</div>
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="Phone" class="control-label">⼿机号 <span >*</span></label>
</div>
<div class="col-sm-8">
<input type="text" id="Phone" name="Phone" autocomplete="off" class="form-control input-sm span3">
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="Address" class="control-label">地址</label>
</div>
<div class="col-sm-8">
<input type="text" id="Address" name="Address" autocomplete="off" class="form-control input-sm span3">
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="Score" class="control-label">积分</label>
</div>
<div class="col-sm-8">
<input type="text" id="Score" name="Score" autocomplete="off" class="form-control input-sm span3">
</div>
</div>
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="GradeCode" class="control-label">等级</label>
</div>
<div class="col-sm-8">
@Html.DropDownListFor(model => model.GradeCode, ViewBag.GradeList as IEnumerable<SelectListItem>, new { @class = "form-control textbox input-sm" })
</div>
</div>
</div>
}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary" id="btnSaveClient">
保存
</button>
</div>
</div>
$('#frm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
CardNo: {
verbo: fal,
validators: {
notEmpty: {
message: '卡号不能为空'
},
remote: {
type: 'POST',
url: '@Url.Content("~/Client/CheckCardNo")',
dataType: 'json',
data: {
ClientId: function () {
return $('#Id').val()
},
CardNo: function () {
return $('#CardNo').val()
}
},
message: '此卡号已存在',
delay: 200
}
}
},
UrName: {
validators: {
notEmpty: {
message: '会员名不能为空'
}
}
},
Phone: {
validators: {
notEmpty: {
message: '⼿机号码不能为空'
},
regexp: {
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '请输⼊正确的⼿机号码'
}
}
},
Score: {
validators: {
regexp: {
regexp: /^[\d]+$/,
message: '积分必须为数字'
}
}
}
}
});
如上代码所⽰，对frm表单进⾏验证初始化，CardNo,UrName等为控件的name属性运⾏效果如下：
其中，对CardNo有重复性check，此时需要使⽤remote进⾏验证，后台代码如下：
/// <summary>
/// 检查CardNo
/// </summary>
/// <param name="ClientId"></param>
/// <param name="CardNo"></param>
/// <returns></returns>
public JsonResult CheckCardNo(String ClientId, String CardNo)
{
try
{
/
/ 检索条件
ClientFilter filter = new ClientFilter();
filter.CardNo = CardNo;
List<ClientDomain> clients = ClientBiz.GetDomainByExactFilter(filter) as List<ClientDomain>; ValidaResult resObj = new ValidaResult();
resObj.valid = true;
if (String.IsNullOrEmpty(ClientId) && clients.Count > 0)
{
resObj.valid = fal;
}
el if (!String.IsNullOrEmpty(ClientId))
{
if (clients.Count > 1)
{
resObj.valid = fal;
}
el if (clients.Count == 1 && !clients[0].Id.Equals(ClientId))
{
resObj.valid = fal;
}
}
return Json(resObj, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
Log.SaveException(ex);
return new JsonResult()
{
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
Data = new { ResultTitle = Constant.Result_Title_Error, ResultMessage = ex.Message } };
}
}
/// <summary>
/// Valid 结果
/
// </summary>
[Serializable]
[DataContract]
public class ValidaResult
{
[DataMember]
public Boolean valid { get; t; }
}
验证效果如下：
regexp：是对字段进⾏正则表达式验证，可以根据⾃⼰的需要进⾏相应的验证。
还有密码确认密码验证
//密码确认
edit_passwd1: {
message: '密码确认验证失败',
validators: {
notEmpty: {
message: '密码确认不能为空'
},
identical: {
field: 'edit_passwd',
message: '两次密码不相同'
}
}
}
长度验证
stringLength: {
min: 5,
max: 128,
message: '显⽰名长度必须在6到18位之间'
}
等等
在提交画⾯变更时，需要进⾏验证
//开启验证
$('#frm').data('bootstrapValidator').validate();
if ($('#frm').bootstrapValidator('validate').has('.has-error').length != 0) {
return;
}
或者
var flag = $("#frm").data(“bootstrapValidator”).isValid();
验证通过之后进⾏页⾯数据提交
在画⾯初始化的时候，如果上次画⾯关闭前有验证消息，再次打开或许会出现验证消息依然存在的情况，这时候需要重置所有验证
$("frm").data("bootstrapValidator").retForm();
以上，就是相关前端验证的内容。
========================================================================
是不是到这⾥就结束了，⼀开始我也以为是的，源⾃于我对⽤户的信任，可是事实上⼤部分⽤户也完全值得我们的信任，但是作为开发者，我们不能允许有异常发⽣。以此为例：
请看下⾯的画⾯
这是对【会员名】的验证
UrName: {
validators: {
notEmpty: {
message: '会员名不能为空'
}
}
}
当我们修改会员名，设置为空时
看起来⼀切正常，只有输⼊会员名我们才能提交，但是当我们输⼊会员名，并点击【保存】
我们这时选择在代码中打⼊断点
此时我们看到，代码已经进⾏了正常的前端Validation验证，并且已经验证通过了，那么如果我们此时在调试窗⼝⼿动的去修改画⾯的值，那么验证将不再有效
可以看到，⼿动的将【会员名】改成了空值，运⾏结束后看最终结果值
此时【会员名】变成空了。
那么，我们就需要考虑⼀个问题，如何避免这个问题。
答案很简单，进⾏双重验证，客户端和服务器端都进⾏验证，由此我们还需要对模型进⾏验证。验证⽅法如下：
MVC 模型注解验证
在对应的实体类的字段上加注解，如
/// <summary>
/
// UrName
/// </summary>
[DataMember]
[Required(ErrorMessage = "会员名不能空")]
public String UrName
{
get
{
return this.urName;
}
t
{
this.urName = value;
}
}
<div class="row edit-field-div">
<div class="col-sm-3 input-label">
<label for="UrName" class="control-label">会员名 <span >*</span></label>
