1

在我的 angularjs 表单中，我正在使用检查多个条件的正则表达式检查密码模式。基于此正则表达式的不同条件检查，我想更改其中一个元素的 css。

Jsfiddle 链接在这里。

激发这个灵感的源模型来自这里。

这是我根据正则表达式检查模式的功能：

$scope.passPatternCheck= (function() {
    var regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]?)[A-Za-z\d!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]{8,}/;
    return {
        test: function(value) {               
            return regexp.test(value);
        }
    };
})();

一些注意事项：

  • 此正则表达式不检查开始/结束空格；这也应该调整
  • 显示/隐藏条件列表的ng-ifdiv 当前不起作用。

问题：

我想从 godaddy 站点帐户创建页面重现相同的行为。所以目标是根据完成的条件具有相同的 css 行为。 在此处输入图像描述

更新2：

theForm如果未填写任何必填字段或发生模式错误，我的表单提交按钮应被禁用：

<button type="submit" class="btn btn-primary"ng-disabled="theForm.$invalid" ng-click="submit()">
</button>

但是有了Shantanu 的回答，这还不可能。

4

1 回答 1

4

添加一个正则表达式ng-pattern将无法实现。因为如果正则表达式测试失败，那么我们将无法确切知道所有这些复选框条件中的哪种情况失败。您必须为每个条件处理不同的正则表达式并在自定义指令（使用$validators）中检查它们并为每个验证创建自定义验证器，或者您可以在控制器内更改密码输入字段时检查这些条件并创建一个具有不同属性的对象作为这些验证条件的布尔值。

我为第二种方法创建了 jsfiddle：http: //jsfiddle.net/shantanu_k/Lnupw3p2/7/

根据更新的问题进行更新（如果任何条件失败，表格必须无效，从而禁用提交按钮）：http: //jsfiddle.net/shantanu_k/Lnupw3p2/10/

于 2017-08-10T19:25:05.970 回答