建設Valdr自定義驗證器

Question

我一直在嘗試使用Valdr AngularJs插件建立一個自定義驗證器，但沒有成功。

我希望存檔是應該接收的日期和時間格式等的輸入文字：DD/MM/YYYY HH：MM（2015年12月4日12時32分10秒）

基於Valdr文檔，這是我迄今所做的：

---

myApp.factory('customValidator', function() { 
    return { 
    name: 'customValidator', // this is the validator name that can be referenced from the constraints JSON 
    validate: function (value, arguments) { 
     // value: the value to validate 
     // arguments: the validator arguments 
     return value === arguments.onlyValidValue; 
    } 
    }; 
}); 

myApp.config(function(valdrProvider) 
    { 
     valdrProvider.addValidator('customValidator'); 
     valdrProvider.addConstraints(
      { 
       'Person': 
       { 
        'date_send': 
        { 
         'customValidator': 
         { 
          'onlyValidValue':'^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$', 
          'message': 'Please date and time format has to be : 12/04/2015 12:32:10' 
         } 
        } 
       } 
      }); 
    }); 

然後在我的形式，我有以下幾點：

<input class="input" name="date_send" id="date_send" type="text" ng-model="date_send" /> 

卜它不起作用。

我會很感激任何幫助。

謝謝！

Answer 1

我不能100％肯定，因爲你沒有提供足夠的代碼，但我猜你的輸入字段聲明應該是

ng-model="person.date_send" 

而不是

ng-model="date_send" 

僅供參考，請有看看custom validator demo。如果您可以提供plunker一個完整的樣本，這總是有幫助的。

Answer 2

如果你只需要一個正則表達式驗證，我建議使用由valdr提供的，而不是寫一個自定義的驗證之一：

valdrProvider.addConstraints({ 
    'Person': { 
     'date_send': { 
     'pattern': { 
      'value': '^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$', 
      'message': 'Please date and time format has to be : 12/04/2015 12:32:10' 
     } 
     } 
    } 
    }); 

如果你想有一個自定義的驗證，你必須實現驗證驗證器中的邏輯。您只是從文檔中複製樣本驗證程序，該樣本驗證程序僅將用戶輸入值與約束中配置的「onlyValidValue」進行比較。你想要做的更像是：

valdrProvider.addConstraints({ 
    'Person': { 
     'date_send': { 
     'customDateValidator': { 
      'message': 'Please date and time format has to be : 12/04/2015 12:32:10' 
     } 
     } 
    } 
    }); 

自定義的驗證：

myApp.factory('customDateValidator', function() { 
    return { 
    name: 'customDateValidator', 
    validate: function (value, arguments) { 
     var dateCheck = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$/ 
     return dateCheck.test(value); 
    } 
    }; 
});