来自数据库的正则表达式在角度指令 ng-pattern 中不起作用答案

【问题标题】：regex expression from data base not working in angular directive ng-pattern来自数据库的正则表达式在角度指令 ng-pattern 中不起作用
【发布时间】：2017-04-26 15:42:43
【问题描述】：

我有一个角度形式的表单，其中输入（姓名、电子邮件、电话号码等）是使用角度指令生成的：

    .directive('camposProductos', function () {
return {
    restrict: 'AEC',
    template: '<div class="row" data-ng-class="{true: \'error\', false: \'good\'}[datosBaseForm.campo{{campo.id}}.$dirty && datosBaseForm.campo{{campo.id}}.$invalid]"> ' +
                    '<span class="fa fa-check" aria-hidden="true" data-ng-show="datosBaseForm.campo{{campo.id}}.$valid"></span>' +
                    '<label class="labelStyle col-md-4 col-sm-4 col-xs-12">{{campo.nombre}}:<span>*</span></label>' +
                    '<div class="col-md-7 col-sm-8 col-xs-12 noPaddingLat">' +
                        '<input class="inputBoxStyle" id="{{campo.id}}" data-ng-model="campo.Valor" data-ng-model-options="{ updateOn: \'blur\' }" name="campo{{campo.id}}" type="{{campo.tipo}}" required="" data-ng-pattern="{{campo.validacion}}" placeholder="{{campo.marcador}}">' +                            
                        '<div data-ng-show="datosBaseForm.$submitted || datosBaseForm.campo{{campo.id}}.$touched">' +
                            '<span data-ng-show="datosBaseForm.campo{{campo.id}}.$error.required" class="errorText">El {{campo.nombre}} es obligatorio.</span>' +
                            '<span data-ng-show="datosBaseForm.campo{{campo.id}}.$error.{{campo.tipo}}" class="errorText">Por favor introducir un {{campo.nombre}} valido.</span>' +
                        '</div>' +
                    '</div>' +
                '</div>',
    replace: true,
    transclude: true
};

});

当我引用正则表达式来验证输入时：data-ng-pattern="{{campo.validacion}}" 验证有效，但 angular 引发错误：

    angular.js:13920 Error: [$parse:lexerr] http://errors.angularjs.org/1.5.8/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%200-0%20%5B%5E%5D&p2=%5E((%5B%5E%3C%3E()%5C%5B%5C%5D%5C%5C.%2C%3B%3A%5Cs%40%22%5D%2B(%5C.%5B%5E%3C%3E()%5C%5B%5C%5D%5C%5C.%2C%3B%3A%5Cs%40%22%5D%2B)*)%7C(%22.%2B%22))%40((%5C%5B%5B0-9%5D%7B1%2C3%7D%5C.%5B0-9%5D%7B1%2C3%7D%5C.%5B0-9%5D%7B1%2C3%7D%5C.%5B0-9%5D%7B1%2C3%7D%5D)%7C((%5Ba-zA-Z%5C-0-9%5D%2B%5C.)%2B%5Ba-zA-Z%5D%7B2%2C%7D))%24

数据库中的表达式为：^(([^()[]\.,;:\s@"]+(.[^()[]\.,;:\s @"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3 }.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$ 当我在https://www.debuggex.com/ 中检查时，这是一个有效的表达式

我已经看到，对于 ng-pattern，您可能需要在表达式的每一端添加一个“/”才能使其工作。当我在表达式的每一端添加“/”时：

    $scope.FormatedRegex = '/' + campo.validacion + '/';

角度 $parse:lexerr 错误不再出现，但验证不再有效。

当我不格式化表达式但在控制台中为表单中需要使用正则表达式验证的每个字段引发错误时，我的表单会正确验证。

如何引用正则表达式或格式化正则表达式，以便不给出错误并且字段按预期进行验证？

【问题讨论】：

如果需要从变量创建正则表达式，则需要使用构造函数表示法 - $scope.FormatedRegex = new RegExp(campo.validacion)
感谢@Wiktor！ scope.FormatedRegex = new RegExp(campo.validacion); 这会返回一个对象，然后我必须引用对象中的“源”才能使其工作。 $scope.FormatedRegex = new RegExp(campo.validacion); campo.validacion = $scope.FormatedRegex.source;

标签： javascript angularjs regex validation ng-pattern

【解决方案1】：

使用正则表达式构造符号来构建一个正则表达式对象：

$scope.FormatedRegex = new RegExp(campo.validacion);

这将产生一个 RegExp 对象，您可以在代码中进一步使用它。

要获取底层模式，您可以使用$scope.FormatedRegex.source。

【讨论】：