AngularJS и многоразовые принудительные правила проверки полей

Мне нужно разработать классическое рабочее веб-приложение на основе форм.

Каждая форма содержит некоторые элементы управления, в основном элементы управления вводом. Многие из этих элементов управления имеют правила проверки или поведения, некоторые правила действительны только для одного элемента управления (независимые проверки), а некоторые зависят от значений других элементов управления (зависимые проверки).

Более того, некоторые элементы управления имеют одинаковое семантическое значение в разных формах.

Например, поле ввода «имя клиента» всегда должно иметь максимальную длину 50 символов, и оно используется во многих различных формах. Другой пример: поле со списком «документы» фильтруется на основе поля возраста (т. Е. У клиента менее 18 лет есть другие документы). Если в этой комбинации нет документов, она должна полностью исчезнуть.

Правила следует централизовать и использовать повторно. Несмотря на то, что я могу определять правила в функциях, содержащихся в контроллерах, я не хочу, чтобы программист запомнил добавление правила проверки для определенного поля, потому что я уверен, что он этого не сделает. .

Мне нужен умный способ на основе AngularJS определять правила многократного использования для полей для всех форм и способ заставить программистов автоматически использовать эти правила в полях. В идеале правила должны быть определены на сервере и загружены при необходимости, потому что мне придется повторить проверку на стороне сервера по очевидным причинам безопасности.

Я просмотрел специальные директивы angular, но не уверен, что это правильный способ реализовать такую ​​вещь. Это, безусловно, работает, но я хотел бы знать, как определить правила для разных полей и обеспечить их использование.

Например, используя настраиваемую директиву myCustomerName для имени поля клиента:

app.js var myApp = angular.module ("Мое приложение", []);

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

customer_name.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 И это хорошо, но правила определяются только в клиенте и не являются перекрестными.


person vulkanino    schedule 08.09.2015    source источник
comment
Valdr также может загружать правила с сервера. Прочтите github.com/netceteragroup/valdr#wire-up-your- серверная часть.   -  person Tome Pejoski    schedule 16.11.2015


Ответы (2)


это очень распространенная проблема, и я не уверен, что есть готовый продукт, который решит все ваши проблемы. Прежде всего: вы не можете просто повторно использовать свой код проверки на бэкэнде и во внешнем интерфейсе, потому что это две похожие, но разные проверки. например, в остальном api поле «повторить пароль» не нужно. Другой пример: капча не должна проверяться на веб-интерфейсе.

проверка кросс-поля проста. вы все еще можете инкапсулировать в директиве / компоненте, который принимает ссылки / имена полей в качестве входных данных, а затем использует angular при изменении для проверки логики.

на сервере я бы не стал хранить rules / dsl, я бы просто повторно использовал код js из внешнего интерфейса и запускал этот код на сервере (узле или другой среде выполнения js). если вы используете свой собственный dsl, всегда будет случай, который не поддерживается вашим dsl. правила могут быть очень сложными, поэтому проще иметь полный язык программирования Тьюринга, чем искусственно созданный dsl на лету.

однако я не знаю, как можно «заставить» программиста использовать его. всегда будет проще просто добавить новое поле с «обязательным» маркером, чем искать в базе кода или документации что-то похожее на то, что ему нужно. один из способов, который я могу придумать, - это иметь несколько тестов / анализатора кода, который утверждает, что в какой-то папке нет абсолютно никакой пользовательской проверки и что каждое поле имеет один из ваших пользовательских валидаторов / маркеров. но я не уверен, что это будет удобно для всех остальных разработчиков

person piotrek    schedule 11.11.2015

Вы можете создать политику на углу для выполнения вызовов на серверную часть для проверки данных. Большим преимуществом этого подхода является централизация валидации в одном месте. Я даже не буду вдаваться в достоинства преимуществ пребывания в одном месте правил и проверок. Например, вы можете использовать класс ValidateData в серверной части.

Для этого есть api с углом. https://github.com/webadvanced/ng-remote-validate. Использование очень простое, посмотрите:

<!-- This defined input for validation with context for this ng-remote-validate-->
<input type="password" 
       name="currentPassword" 
       placeholder="Current password" 
       ng-model="password.current" 
       ng-remote-validate="/customer/validpassword"
       ng-remote-throttle="550"
       ng-remote-method="GET"
       required>

<!-- This defined input for validation with context for this ng-remote-validate-->
<input type="text" 
       name="email" 
       placeholder="Email address" 
       ng-model="email" 
       ng-remote-validate="[ '/customer/email-registered', '/customer/email-restricted' ]"
       ng-remote-throttle="800"
       ng-remote-method="POST"
       required>

<!-- This wait validation -->
<span class="message" ng-show="myForm.inputName.$pending">validating...</span>

<!-- This submit form an run validation -->
<button type="submit" ng-disabled="myForm.$invalid || myForm.$pending" ng-click="...">Go!</button>
person Emir Marques    schedule 13.11.2015
comment
Он обрабатывает только более простые независимые проверки. Пожалуйста, прочтите пример о документах и ​​возрасте. - person vulkanino; 19.11.2015