AngularJS 和可重用的强制字段验证规则

标签 angularjs spring architecture workflow rule-engine

我必须设计一个经典的、基于表单的操作网络应用程序。

每个表单都包含一些控件,主要是输入控件。其中许多控件都有验证或行为规则,某些规则仅对单个控件有效(独立检查),而某些规则则取决于其他控件的值(相关检查)。

此外,某些控件在不同的表单中具有相同的语义。

例如,“客户姓名”输入字段的最大长度应始终为 50 个字符,并且在许多不同的表单之间共享。另一个例子是“文档”组合框根据年龄字段进行过滤(即:小于 18 岁的客户拥有不同的文档)。如果该组合中的文档为零,那么它应该完全消失。

规则应该集中并重用。尽管我可以在 Controller 中包含的函数中定义规则,但我不希望程序员记住为某个字段添加验证规则,因为我确信他不会.

我追求的是一种基于 AngularJS 的智能方法来为所有表单的字段定义可重用的规则,以及强制程序员在字段中自动使用这些规则的方法。理想情况下,规则应该在服务器上定义并在需要时下载,因为出于明显的安全原因,我必须在服务器端重新进行检查。

我研究过 Angular 自定义指令,但我不确定这是否是实现此类操作的正确方法。它确实有效,但我想知道如何定义跨领域规则并强制使用它们。

例如,使用自定义指令 myCustomerName 作为客户字段名称:

应用程序.js var myApp = angular.module("MyApp", []);

myApp.directive("myCustomerName", 
    function() 
    {
        return 
        {
            restrict: 'E',
            templateUrl: 'customer_name.html' 
        };
    }
);

客户名称.html

<div class="form-group">
    <label for="customerName">Customer Name</label>
    <input type="text" class="form-control" id="customerName" ng-model="customerName">
</div>

等等。但我没有交叉检查规则!

我可以定义一个更通用的自定义指令:

myApp.directive("ufeCheck", 
    function() 
    {
        return { 
            restrict: 'E',
            templateUrl: function(e, attr) { 
                return attr.type + '.html';
            }
        };
    }
);

然后在 html 中使用它,例如:

<ufe_check type="customer_name"></ufe_check>
<ufe_check type="customer_age"></ufe_check>

但是, 我应该把跨领域检查放在哪里? 我应该如何下载服务器定义的规则?

我想我需要一个规则引擎执行器、客户端和 AngularJS 表单验证兼容。

我看过Valdr:https://github.com/netceteragroup/valdr 这很好,但规则仅在客户端定义,而不是跨领域。

最佳答案

这是非常常见的问题,我不确定是否有一个现成的产品可以解决您的所有问题。首先:您不能只在后端和前端重用验证代码,因为它们是两个相似但不同的验证。例如,其余 api 中不需要“重复密码”字段。另一个例子:验证码不应在前端进行验证。

跨域验证很容易。您仍然可以将 is 封装在接受字段引用/名称作为输入的指令/组件中,然后使用 Angular 的 on-change 来验证逻辑。

在服务器上我不会存储规则/DSL,我只会重用前端的js代码并在后端(节点或其他js运行时)运行该代码。如果您使用自己的 dsl,总会有您的 dsl 不支持的情况。规则可能非常复杂,因此使用图灵完整的编程语言比人工即时创建的 dsl 更容易。

但是我不知道如何“强制”程序员使用它。简单地添加带有“必需”标记的新字段总是比在代码库或文档中搜索与他需要的类似的内容更容易。我能想到的一种方法是使用一些测试/代码分析器,断言某些文件夹中绝对没有自定义验证,并且每个字段都附加了一个自定义验证器/标记。但我不确定这对所有其他开发者来说是否方便

关于AngularJS 和可重用的强制字段验证规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32455956/

相关文章:

spring - OSGi 容器中的 web.xml

php - 寻找简单 HTML 游戏的设计/架构建议

iphone - 我应该如何设计我的iPhone应用程序以与我的网站对话?

javascript - 将数据从函数 B 传输到函数 A

javascript - AngularJS 从数组中删除项目留下 undefined object

java - 如何在 spring 中以声明方式将(绑定(bind))对象放入 jndi?

javascript - Backbone.js 执行 OPTIONS 而不是 POST

architecture - 实时数据处理架构

angularjs - Angular 中的 CSRF token 与 Laravel 5 不同

angularjs - AngularJS 中的单元测试 promise 错误 : Expected a spy, 但得到了 getCtrl({ })