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

Jsfiddle link Here .

启发这一点的源模型来自here

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

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


一些注意事项:


这个正则表达式不检查开始/结束空间;这也应该调整
显示/隐藏条件列表的div的ng-if当前不起作用。


题:

我想从godaddy网站帐户创建页面重现相同的行为。因此,目标是根据完成的条件具有相同的CSS行为。
javascript - angularjs ng-pattern根据正则表达式条件更改元素的css样式-LMLPHP

更新2:

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

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


但是对于Shantanu's answer,这还不可能。

最佳答案

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

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

根据更新的问题进行更新(如果任何条件失败,则表单必须无效,从而禁用提交按钮):http://jsfiddle.net/shantanu_k/Lnupw3p2/10/

10-05 20:54
查看更多