angularjs ng-pattern 更改 css 基于正则表达式条件的元素样式

Question

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

启发这个的源模型来自here.

这是我根据正则表达式检查模式的函数：

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

一些注意事项：

此正则表达式不检查 starting/ending 空格；这也应该调整
ng-if条件列表shows/hidesdiv当前不工作

问题：

我想从 godaddy 站点帐户创建页面重现相同的行为。所以目标是根据完成的条件具有相同的 css 行为。

更新 2：

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

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

但是对于，这是不可能的。

Answer 1

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

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

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

angularjs ng-pattern 更改 css 基于正则表达式条件的元素样式

angularjs ng-pattern change css style of elements based on regex condition

javascript

css

jquery

angularjs

angularjs-ng-pattern

一些注意事项：

问题：

更新 2：