客户端上使用Angular进行服务器端表单验证

这是一种方法,取决于您愿意在当前代码中更改多少,并假设一些事情。

让你有一张这样的表格

<form name="form" novalidate ng-submit="update(form)">
    <input type="text" ng-model="Input" name="Input"/>
    <button type="submit">Save</button>
</form>

那么您的更新函数应该如下所示

function update(form) {
    testResource.save($scope.Input)
        .$promise
        .then(function (response) {
            console.log("Success");
        })
        .catch(function (response) {
            console.log("fail");
            for (var i = 0; i < response.data.length; i++) {
                form[response.data[i].Name].$setValidity(response.data[i].Error, false);
            }
        });
}

失败响应中的数据结构如下

[{ Name: "Input", Error: "required" }];

这应该允许您在服务器上执行所有验证,并将其传递给angle来处理。

更详细地说,在提交函数上,您将角度表单发送到控制器,然后当角度资源得到错误响应时,您将错误添加到具有错误的表单属性。这意味着输入的名称必须与从错误响应中传递的名称相同。