构建 Valdr 自定义验证器

Question

我一直在尝试使用 Valdr AngularJs 插件构建自定义验证器，但没有成功。

我要存档的是一个输入文本，它应该接收日期和时间格式，例如：dd/MM/yyyy hh:mm (12/04/2015 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

如果您只需要一个正则表达式验证器，我建议使用 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);
    }
  };
});

Answer 2

我不能 100% 确定，因为您没有提供足够的代码，但我猜您的输入字段声明应该是

ng-model="person.date_send"

而不是

ng-model="date_send"

如需参考，请查看custom validator demo。如果您可以向plunker 提供完整的示例，这总是很有帮助的。