regex - Angular 输入限制指令 - 否定正则表达式

Question

编辑:请随意添加对其他人有用的额外验证，使用这个简单的指令。

--

我正在尝试创建一个限制输入到文本框中的字符的 Angular 指令。我已经成功地处理了几个常见的用例(字母、字母数字和数字)，但是使用流行的方法来验证电子邮件地址、日期和货币我无法让指令工作，因为我需要它否定正则表达式。至少这是我认为它需要做的。

非常感谢任何有关货币(可选的千位分隔符和美分)、日期(mm/dd/yyyy)和电子邮件的帮助。我根本不擅长正则表达式。

这是我目前拥有的: http://jsfiddle.net/corydorning/bs05ys69/

HTML

<div ng-app="example">
<h1>Validate Directive</h1>

<p>The Validate directive allow us to restrict the characters an input can accept.</p>

<h3><code>alphabetical</code> <span style="color: green">(works)</span></h3>
<p>Restricts input to alphabetical (A-Z, a-z) characters only.</p>
<label><input type="text" validate="alphabetical" ng-model="validate.alphabetical"/></label>

<h3><code>alphanumeric</code> <span style="color: green">(works)</span></h3>
<p>Restricts input to alphanumeric (A-Z, a-z, 0-9) characters only.</p>
<label><input type="text" validate="alphanumeric" ng-model="validate.alphanumeric" /></label>

<h3><code>currency</code> <span style="color: red">(doesn't work)</span></h3>
<p>Restricts input to US currency characters with comma for thousand separator (optional) and cents (optional).</p>
<label><input type="text" validate="currency.us" ng-model="validate.currency" /></label>

<h3><code>date</code> <span style="color: red">(doesn't work)</span></h3>
<p>Restricts input to the mm/dd/yyyy date format only.</p>
<label><input type="text" validate="date" ng-model="validate.date" /></label>

<h3><code>email</code> <span style="color: red">(doesn't work)</span></h3>
<p>Restricts input to email format only.</p>
<label><input type="text" validate="email" ng-model="validate.email" /></label>

<h3><code>numeric</code> <span style="color: green">(works)</span></h3>
<p>Restricts input to numeric (0-9) characters only.</p>
<label><input type="text" validate="numeric" ng-model="validate.numeric" /></label>

JavaScript

angular.module('example', [])
  .directive('validate', function () {
    var validations = {
      // works
      alphabetical: /[^a-zA-Z]*$/,

      // works
      alphanumeric: /[^a-zA-Z0-9]*$/,

      // doesn't work - need to negate?
      // taken from: http://stackoverflow.com/questions/354044/what-is-the-best-u-s-currency-regex
      currency: /^[+-]?[0-9]{1,3}(?:,?[0-9]{3})*(?:\.[0-9]{2})?$/,

      // doesn't work - need to negate?
      // taken from here: http://stackoverflow.com/questions/15196451/regular-expression-to-validate-datetime-format-mm-dd-yyyy
      date: /(?:0[1-9]|1[0-2])\/(?:0[1-9]|[12][0-9]|3[01])\/(?:19|20)[0-9]{2}/,

      // doesn't work - need to negate?
      // taken from: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
      email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,

      // works
      numeric: /[^0-9]*$/
    };

  return {
    require: 'ngModel',

    scope: {
      validate: '@'
    },

    link: function (scope, element, attrs, modelCtrl) {
      var pattern = validations[scope.validate] || scope.validate
      ;

      modelCtrl.$parsers.push(function (inputValue) {
        var transformedInput = inputValue.replace(pattern, '')
        ;

        if (transformedInput != inputValue) {
          modelCtrl.$setViewValue(transformedInput);
          modelCtrl.$render();
        }

        return transformedInput;
      });
    }
  };
});

Answer 1

我很确定，有更好的方法，可能正则表达式也不是最好的工具，但这是我的建议。

这样您只能限制允许输入的字符并强制用户使用正确的格式，但是您还需要在用户完成输入后验证最终输入，但这是另一回事。

字母、数字和字母数字非常简单，用于输入和验证输入，因为很清楚您可以键入什么以及什么是正确的最终输入。但是对于日期、邮件、货币，您无法使用正则表达式验证输入是否完全有效，因为用户需要先输入它，同时输入需要在最终有效输入方面无效。因此，这是一回事，例如限制用户仅键入数字和 / 日期格式，例如:12/12/1988，但最终您需要例如，检查他是否输入了正确的日期或只是 12/12/126。这需要在用户提交答案时检查，或者当文本字段失去焦点时等。

为了验证输入的字符，你可以试试这个:

JSFiddle DEMO

第一个变化:

var transformedInput = inputValue.replace(pattern, '')

到

var transformedInput = inputValue.replace(pattern, '$1')

然后使用正则表达式:

• /^([a-zA-Z]*(?=[^a-zA-Z]))./ - 字母
• /^([a-zA-Z0-9]*(?=[^a-zA-Z0-9]))./ - 字母数字
• /(\.((?=[^\d])|\d{2}(?![^,\d.]))|,((?=[^\d]) |\d{3}(?=[^,.$])|(?=\d{1,2}[^\d]))|\$(?=.)|\d{4,}( ?=,)).|[^\d,.$]|^\$/- 货币(允许字符串如:343243.34、1,123,345.34、.05，带或不带 $)
• ^(((0[1-9]|1[012])|(\d{2}\/\d{2}))(?=[^\/])|((\d)|(\d{2}\/\d{2}\/\d{1,3})|(.+\/))(?=[^\d])|\d{2}\/\d{2}\/\d{4}(?=.)).|^(1[3-9]|[2-9]\d)|((?!^)(3[2 -9]|[4-9]\d)\/)|[3-9]\d{3}|2[1-9]\d{2}|(?!^)\/\d\/|^\/|[^\d/] - 日期 (00-12/00-31/0000-2099)
• /^(\d*(?=[^\d]))./ - 数字
• /^([\w.$-]+\@[\w.]+(?=[^\w.])|[\w.$-]+\@(?=[ ^\w.-])|[\w.@-]+(?=[^\w.$@-])).$|\.(?=[^\w-@]).|[^\w.$@-]|^[^\w]|\.(?=@).|@(?=\.)./i - 电子邮件

通常，它使用这种模式:

([valid characters or structure] captured in group $1)(?= positive lookahead for not allowed characters) any character

实际上它将捕获组 $1 中的所有有效字符，如果用户输入无效字符，整个字符串将替换为组 $1 中已捕获的有效字符.它由排除一些明显无效字符的部分补充，例如邮件中的 @@ 或货币中的 34...2。

了解这些正则表达式的工作原理后，尽管它看起来很复杂，但我认为通过添加额外的允许/不允许字符来扩展它很容易。

验证货币、日期和邮件的正则表达式很容易找到，所以我觉得在这里发布它们是多余的。

OffTopic。此外，您演示中的 currency 部分不起作用，这是因为:validate="currency.us"而不是 validate="currency"，或者至少在这次修改后它可以工作。