如何在ASP.NET Web应用中通过Fluent Validation将输入错误传递到Index.cshtml视图

1. 错误格式转换处理 #

不用修改Fluent Validation本身的校验规则，只需要在校验完成后对错误集合做重组即可，如果你是通过自定义异常抛出校验错误，直接把Fluent Validation返回的错误转成键为字段名、值为错误信息的字典：

// 校验逻辑示例
var validationResult = await _userValidator.ValidateAsync(userViewModel);
if (!validationResult.IsValid)
{
    var errors = validationResult.Errors.ToDictionary(
        e => e.PropertyName, 
        e => e.ErrorMessage
    );
    throw new CustomValidationException(errors);
}

你需要先给自定义异常类新增public Dictionary<string, string> ValidationErrors { get; set; }属性，用来承载转换后的错误集合。

2. 接口统一返回配置 #

在全局异常过滤器或者控制器的异常捕获逻辑中，把自定义验证异常的错误字典直接作为响应内容返回，HTTP状态码设置为400即可：

// 控制器异常捕获示例
catch (CustomValidationException ex)
{
    return BadRequest(ex.ValidationErrors);
}

完成这两步后接口返回的JSON就会是{"username":"用户名不能为空","email":"邮箱格式不符合要求"}这种你需要的字段名:错误信息格式。

1. AngularJS逻辑适配 #

在接口请求的错误回调中捕获400状态码的响应，把返回的错误对象挂载到作用域变量上：

// 控制器表单提交逻辑
$scope.submitForm = function() {
    userService.saveUser($scope.user).then(function(res) {
        // 提交成功后的业务逻辑
    }, function(err) {
        if (err.status === 400) {
            $scope.validationErrors = err.data;
        }
    });
};

2. HTML页面错误渲染 #

在每个输入框的对应位置添加错误提示节点，对应字段存在错误时自动展示：

<!-- 用户名输入模块示例 -->
<div class="form-item">
    <label>用户名</label>
    <input type="text" ng-model="user.username" name="username">
    <span class="error-tip" ng-if="validationErrors.username">{{validationErrors.username}}</span>
</div>

<!-- 邮箱输入模块示例 -->
<div class="form-item">
    <label>邮箱</label>
    <input type="email" ng-model="user.email" name="email">
    <span class="error-tip" ng-if="validationErrors.email">{{validationErrors.email}}</span>
</div>

如果单个字段可能返回多个错误，可以把后端字典的值调整为数组类型，前端用ng-repeat遍历展示即可。

内容的提问来源于stack exchange，提问作者Matomkd