AngularJS和可重複使用，強制執行的字段驗證規則

我必須設計一個經典的，基於表單的運營Web應用程序。AngularJS和可重複使用，強制執行的字段驗證規則

每個表單都包含一些控件，主要是輸入控件。這些控件中的許多控件都有驗證或行爲規則，某些規則僅對單個控件有效（獨立檢查），有些則依賴於其他控件的值（依賴性檢查）。

此外，一些控件在不同的表單中具有相同的語義含義。

例如，「客戶名稱」輸入字段應始終具有50個字符的最大長度，並且它在許多不同的表單之間共享。另一個例子是，「文檔」組合框是基於年齡字段進行過濾的（即：年齡小於18歲的客戶具有不同的文檔）。如果該組合中有零個文檔，則它應該完全消失。

規則應該集中和重用。儘管我可以在包含在控制器中的函數中定義規則，但我不希望程序員爲記住爲某個字段添加驗證規則，因爲我確信他不會。

我所追求的是一種基於AngularJS的智能方式，爲所有表單的字段定義可重複使用的規則，以及強制程序員自動在字段中使用這些規則的方式。理想情況下，規則應該在服務器上定義並在需要時下載，因爲出於安全原因，我必須在服務器端重新進行檢查。

我已經看過角度自定義指令，但我不確定這是實現這種事情的正確方法。它肯定有效，但我想知道如何定義跨場規則並強制使用它們。

例如，使用自定義指令myCustomerName爲客戶字段名：

app.js VAR對myApp = angular.module（「MyApp的」，[]）;

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 它很好，但規則只在客戶端定義，不是交叉字段。

來源

2015-09-08 vulkanino

Valdr也可以從服務器加載規則。請閱讀https://github.com/netceteragroup/valdr#wire-up-your-back-end。 – tomepejo

這是非常普遍的問題，我不確定是否有架子產品可以解決您的所有問題。首先：你不能僅僅在你的後端和前端重用你的驗證代碼，因爲這是兩個相似但不同的驗證。例如'重複密碼'字段在其他api中不是必需的。另一個例子：captcha不應該在前端進行驗證。

crossfield驗證很容易。你仍然可以封裝在接受字段引用/名稱作爲輸入的指令/組件中，然後使用角度的on-change來驗證邏輯。

在服務器上我不會存儲規則/ dsl，我只是重複使用前端的js代碼並在後端（節點或其他js運行時）上運行該代碼。如果您使用自己的dsl，那麼您的dsl將始終存在不支持的情況。規則可能非常複雜，因此更容易擁有完整的編程語言，而不是人工即時創建的dsl。

但是我不知道如何能'執行'程序員使用它。只需用'必需'標記添加新字段，而不是在代碼庫或文檔中搜索與他需要的內容類似的東西，將會更容易。我能想到的一種方式是擁有一些測試/代碼分析器，聲明在某個文件夾中絕對不存在自定義驗證，並且每個字段都附加了一個自定義驗證器/標記。但我不確定它會對所有其他開發人員方便

來源

2015-11-11 01:40:21 piotrek

您可以創建一個角度策略來調用後端以驗證數據。這種方法的一大優點是驗證集中在一個地方。我甚至不會考慮留在一個地方的規則和驗證的優點。例如，您可以在後端使用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>

來源

2015-11-13 13:51:53

它只處理簡單的獨立檢查。請閱讀關於文件和年齡的例子。 – vulkanino

AngularJS和可重複使用，強制執行的字段驗證規則

回答

相關問題