在验证指令中使用element.bind

Question

我尝试使用自定义指令验证输入：

.directive('customValidation', function () {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModelCtrl) {
                function fromUser(text) {
                    element.bind("keydown keypress", function (event) {
                        if (!(event.keyCode >= 48 && event.keyCode <= 57)) {
                            return undefined;
                        }
                    })
                }
                ngModelCtrl.$parsers.push(fromUser);
            }
        };
    });

但这不起作用。 任何字符都通过验证。 我做错了什么？

Answer 1

因此，基本上，您想要实现的是检查输入是否仅包含数字。 至少从您的解释和示例代码中我可以理解。

首先，您使用parser ，该parser用于清理和转换从DOM传递到模型的值。 随后进行验证。 如果只想检查是否只写数字，则需要这样的代码：

ngModel.$validators.validCharacters = function(modelValue, viewValue) {
  var value = modelValue || viewValue;
  return /[0-9]+/.test(value);
};

我建议阅读API文档，因为它们会非常详尽地解释所有ngModelController功能： 单击此处以获取完整的文档

其次，您每次调用解析器时都绑定到一个事件。 每次您更改输入元素的内容时，都会调用该解析器。 如果您每次在输入中键入单词，最终将绑定事件九次 ！ 除了在您更改某些内容后绑定到事件这一事实之外，因为您的第一个事件已经被触发，为时已晚。