在客户端上使用Angular进行服务器端表单验证 [英] Server Side Form Validation with Angular on the Client

问题描述

我目前有一个项目，正在将客户端内容转换为Angular，因为我喜欢它的绑定方面.目前，我正在服务器上进行表单验证.在客户端和服务器上都做了多年之后，我发现我的偏爱是通过对服务器的AJAX请求来实现的.因此，根据设计，没有客户端表单验证.

I currently have a project where I am converting the client-side stuff to Angular, as I like the bindings aspect of it. Currently, I am doing form validation at the server. After years of doing it at both client and server, I've found my preference is to do it by way of an AJAX request to the server. So, there's no client-side form validation, by design.

这很有效，我可以使用jQuery来显示带有ModelState中的任何验证错误的表单，该错误会以json的形式发送回客户端.

It works a treat, with me being able to use jQuery to light up the form with any validation errors that are in the ModelState which is sent back down to the client as json.

现在是Angular.我想保留此实现，但是我感觉自己正在为此与技术作斗争. Angular似乎坚持要进行客户端验证.

Now Angular. I want to keep this implementation, but I feel like I am fighting against the technology to do so. Angular seems to insist on client-side validation.

是否没有办法在收到带有验证错误的AJAX响应后，告诉Angular验证机制什么无效，所以我仍然可以只使用服务器端验证?

Is there not a way to, upon receiving an AJAX response with validation errors, tell the Angular validation mechanism what is invalid so I can still just use server-side validation?

修改 我应该包含指向我基于其实现的帖子的链接- http://timgthomas.com/2013/09/simplify-client-side-validation-by-adding-a-server/如您所见，它不使用Angular.最好将其用于服务器端，并使其与AngularJs一起使用

Edit I should include a link to a post which I based my implementation on - http://timgthomas.com/2013/09/simplify-client-side-validation-by-adding-a-server/ As you can see, it does not use Angular. It would be nice to take the Server-side aspects of it and get it working with AngularJs

谢谢

推荐答案

这是一种实现方法，具体取决于您愿意在当前代码中进行多少更改并承担一些责任.

This is one way to do it, depending on how much you're willing to change in your current code and assuming some things.

让我们有一个这样的表格

Let's you have a form like this

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

然后您的更新功能应如下所示

Then your update function should look like this

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);
            }
        });
}

失败响应中的数据将像这样

The data in the failed response would be structured like this

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

这应该允许您在服务器上进行所有验证，并将其传递给angular进行处理.

This should allow you to do all the validation on the server and pass it down to angular to handle.

更详细一点，在Submit函数上，您将角度形式发送给控制器，然后，当角度资源得到错误响应时，您将错误添加到具有错误的form属性中.这意味着您输入的名称必须与错误响应中传递的名称相同.

Going into a bit more detail, on the submit function you're sending the angular form up to the controller, then when the angular resource gets a bad response you add the error to the form property that has an error. This would mean the name of your input would have to be the same as the Name you pass down from the bad response.

这篇关于在客户端上使用Angular进行服务器端表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！