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

单脚意志

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

它可以解决问题,我可以使用jQuery来显示ModelState中存在的任何验证错误,然后以json形式将其发送回客户端,以点亮表单。

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

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

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

谢谢

乔治

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

我们有一个这样的表格

<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" }];

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Play Framework进行客户端/服务器端验证

来自分类Dev

使用jQuery成功进行客户端验证后,如何提交html表单以进行服务器端验证?

来自分类Dev

HTML5:我是否需要同时在客户端和服务器端验证Web表单,还是可以只在客户端进行验证?

来自分类Dev

删除服务器端验证并进行全面的客户端验证?

来自分类Dev

尝试验证表单客户端和服务器端

来自分类Dev

从服务器端到客户端的密码确认(表单验证)

来自分类Dev

在客户端委派服务器端验证

来自分类Dev

何时进行客户端或服务器端验证

来自分类Dev

如何使用服务器端C#在客户端更改表单属性

来自分类Dev

访问服务器端javascript变量以使用客户端javascript进行操作

来自分类Dev

如果 Angular 应用程序正确验证客户端表单,Angular 应用程序是否需要服务器端错误处理?

来自分类Dev

单一真相源(DRY)可以在客户端和服务器端验证AngularJS表单

来自分类Dev

分布式系统:引发客户端上服务器端抛出的错误

来自分类Dev

通过流畅的验证进行电子邮件检查与服务器端客户端不同

来自分类Dev

如何强制服务器端验证而不是仅客户端验证?

来自分类Dev

PHP/JQuery/AJAX 表单 - 仅使用内联错误样式进行服务器端验证

来自分类Dev

使用多个表单字段进行服务器端验证

来自分类Dev

Struts Web应用程序:可重复使用的验证客户端和服务器端

来自分类Dev

(Vue)Ant Design使用v-decorator以ant的形式显示客户端以及服务器端的验证

来自分类Dev

ASP.NET服务器端或客户端的验证控件?

来自分类Dev

服务器端验证本地化与客户端不同

来自分类Dev

Facebook身份验证:服务器端与客户端。Python / Django

来自分类Dev

在客户端使用Jade语言,应在服务器端进行编译,而不会影响条件

来自分类Dev

使用NServiceBus.Send从服务器端对客户端进行即时而优美的响应

来自分类Dev

如何使用Nest js作为服务器端并在客户端进行React从puppeteer下载pdf?

来自分类Dev

在 javax.mail api 中使用 SearchTern 进行搜索是在服务器端或客户端完成的

来自分类Dev

客户端与服务器端模板(哪个?)

来自分类Dev

Mongodb服务器端与客户端处理

来自分类Dev

客户端服务器端模板nodejs

Related 相关文章

  1. 1

    使用Play Framework进行客户端/服务器端验证

  2. 2

    使用jQuery成功进行客户端验证后,如何提交html表单以进行服务器端验证?

  3. 3

    HTML5:我是否需要同时在客户端和服务器端验证Web表单,还是可以只在客户端进行验证?

  4. 4

    删除服务器端验证并进行全面的客户端验证?

  5. 5

    尝试验证表单客户端和服务器端

  6. 6

    从服务器端到客户端的密码确认(表单验证)

  7. 7

    在客户端委派服务器端验证

  8. 8

    何时进行客户端或服务器端验证

  9. 9

    如何使用服务器端C#在客户端更改表单属性

  10. 10

    访问服务器端javascript变量以使用客户端javascript进行操作

  11. 11

    如果 Angular 应用程序正确验证客户端表单,Angular 应用程序是否需要服务器端错误处理?

  12. 12

    单一真相源(DRY)可以在客户端和服务器端验证AngularJS表单

  13. 13

    分布式系统:引发客户端上服务器端抛出的错误

  14. 14

    通过流畅的验证进行电子邮件检查与服务器端客户端不同

  15. 15

    如何强制服务器端验证而不是仅客户端验证?

  16. 16

    PHP/JQuery/AJAX 表单 - 仅使用内联错误样式进行服务器端验证

  17. 17

    使用多个表单字段进行服务器端验证

  18. 18

    Struts Web应用程序:可重复使用的验证客户端和服务器端

  19. 19

    (Vue)Ant Design使用v-decorator以ant的形式显示客户端以及服务器端的验证

  20. 20

    ASP.NET服务器端或客户端的验证控件?

  21. 21

    服务器端验证本地化与客户端不同

  22. 22

    Facebook身份验证:服务器端与客户端。Python / Django

  23. 23

    在客户端使用Jade语言,应在服务器端进行编译,而不会影响条件

  24. 24

    使用NServiceBus.Send从服务器端对客户端进行即时而优美的响应

  25. 25

    如何使用Nest js作为服务器端并在客户端进行React从puppeteer下载pdf?

  26. 26

    在 javax.mail api 中使用 SearchTern 进行搜索是在服务器端或客户端完成的

  27. 27

    客户端与服务器端模板(哪个?)

  28. 28

    Mongodb服务器端与客户端处理

  29. 29

    客户端服务器端模板nodejs

热门标签

归档