Angularjs动态ng模式验证

7 回答

• 2

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  

  <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
  

  回复于 2024-04-20T11:13:59+08:00
• 0

  这是一个有趣的问题，复杂的角度验证 . 以下小提琴实现您想要的：

  http://jsfiddle.net/2G8gA/1/

  详情

  我创建了一个新的指令 rpattern ，它是Angular的 ng-required 和 input[type=text] 的 ng-pattern 代码的混合 . 它的作用是观察字段的 required 属性，并在使用regexp进行验证时将其考虑在内，即如果不需要，则将字段标记为 valid-pattern .

  注意事项

  • 大多数代码来自Angular，根据需要量身定制 .

  • 选中该复选框后，该字段为必填项 .

  • 当必填复选框为false时，不隐藏该字段 .

  • 演示文稿简化了正则表达式（有效值为3位数） .

  ---

  如果你不想要新的指令，那么一个肮脏的（但更小的）解决方案将是这样的：

  $scope.phoneNumberPattern = (function() {
      var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
      return {
          test: function(value) {
              if( $scope.requireTel === false ) {
                  return true;
              }
              return regexp.test(value);
          }
      };
  })();
  

  在HTML中，不需要进行任何更改：

  <input type="text" ng-model="..." ng-required="requireTel"
      ng-pattern="phoneNumberPattern" />
  

  这实际上是通过调用我们的 test() 方法，而不是 RegExp.test() ，将 required 考虑在内 .

  回复于 2024-04-20T11:13:59+08:00
• 2

  没有采取任何远离尼科斯的真棒答案，也许你可以更简单地做到这一点：

  <form name="telForm">
    <input name="cb" type='checkbox' data-ng-modal='requireTel'>
    <input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/>
    <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
  </form>
  

  注意第二个输入：我们可以使用 ng-if 来控制表单中的呈现和验证 . 如果未设置 requireTel 变量，则第二个输入不仅会被隐藏，而且根本不会被渲染，因此表单将通过验证并且按钮将变为启用状态，您将获得所需的内容 .

  回复于 2024-04-20T11:13:59+08:00
• 5

  二手图案：

  ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"
  

  使用的参考文件：

  '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>'
  

  输入示例：

  <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
  

  回复于 2024-04-20T11:13:59+08:00
• 25

  我前几天刚碰到这个 .

  我所做的，比上面更容易，是在范围上的变量上设置模式，并在视图中以ng-pattern引用它 .

  当“取消选中该复选框”时，我只需在onChanged回调上将正则表达式值设置为/.*/（如果要取消选中） . ng-pattern选择改变并说“好，你的 Value 很好” . 表格现在有效 . 我也会从现场删除坏数据，这样你就不会有一个明显不好的电话＃坐在那里 .

  我有关于ng-required的其他问题，并做了同样的事情 . 工作就像一个魅力 .

  回复于 2024-04-20T11:13:59+08:00
• -1

  如果ngModel $ viewValue与通过评估属性值中给出的Angular表达式找到的RegExp不匹配，则设置模式验证错误键 . 如果表达式求值为RegExp对象，则直接使用它 . 如果表达式求值为字符串，则在将其包装为^和$字符后将转换为RegExp .

  似乎应该更新这个问题中一个投票最多的答案，因为当我尝试它时，它不适用 test 函数和验证不起作用 .

  Angular docs中的示例对我有用：

  修改内置验证器

  HTML

  <form name="form" class="css-form" novalidate>
    <div>
     Overwritten Email:
     <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
     <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
     Model: {{myEmail}}
    </div>
  </form>
  

  JS

  var app = angular.module('form-example-modify-validators', []);
  
  app.directive('overwriteEmail', function() {
      var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;
  
      return {
          require: 'ngModel',
          restrict: '',
          link: function(scope, elm, attrs, ctrl) {
              // only apply the validator if ngModel is present and Angular has added the email validator
              if (ctrl && ctrl.$validators.email) {
  
                  // this will overwrite the default Angular email validator
                  ctrl.$validators.email = function(modelValue) {
                      return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                  };
               }
           }
       };
   });
  

  Plunker

  回复于 2024-04-20T11:13:59+08:00
• 173

  您可以使用site https://regex101.com/为某个国家/地区构建自己的特定模式：

  例如，波兰：

  -pattern = xxxxxxxxx OR xxx-xxx-xxx OR xxx xxx xxx 
  -regexp ="^\d{9}|^\d{3}-\d{3}-\d{3}|^\d{3}\s\d{3}\s\d{3}"
  

  回复于 2024-04-20T11:13:59+08:00