AngularJS动态ng模式验证

AngularJS动态ng模式验证

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

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

细节

我创建了一个新指令，

rpattern

该指令是Angular的代码

ng-required

和的

ng-pattern

代码的混合

input[type=text]

。它的作用是监视

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" />

实际上，这会诱使angular调用 我们的

test()

方法，而不是

RegExp.test()

，将其

required

考虑在内。