使用 angularjs 和 ngPattern 验证 UTF-8 名称答案

【问题标题】：Validate UTF-8 names with angularjs and ngPattern使用 angularjs 和 ngPattern 验证 UTF-8 名称
【发布时间】：2014-12-18 15:58:00
【问题描述】：

有没有办法在表单验证中使用 ng-pattern 来验证 任何字母 来自任何字母（拉丁文、中文、韩文、俄文……）。

我找到了一个使用 XRegExp 库的解决方案，但不适用于 ng-pattern，因为它需要一个字符串正则表达式。

XRegExp("^\\p{L}[\\p{L} ']*$")

一个解决方案也是构建我自己的验证器指令，但如果可能的话，我更喜欢使用 ng-pattern。

【问题讨论】：

标签： javascript regex angularjs

【解决方案1】：

您仍然可以在 ng-pattern 中使用该正则表达式。您只需将正则表达式文字作为字符串传递，如下所示：

ng-pattern="/^\\p{L}[\\p{L} ']*$/"

【讨论】：

纯代码答案几乎没有帮助。请在答案中详细说明，以便寻求此答案的人能够充分理解您在做什么。

【解决方案2】：

ng-pattern="/^.{3,20}$/"

允许任何字符（包括 utf-8）并限制 3-20 个字符，或

ng-pattern="/^.[^*?&]{3,20}$/"

允许任何字符并限制 4-20 个字符，除了 *?& （添加更多字符到 except ）

【讨论】：

【解决方案3】：

我建议使用自定义指令属性，对我来说效果很好。例如，下面我们禁止 ngModel 使用中文字符。

function translationModelPatternDirective() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elem, attrs, ngModel) {
                if (!ngModel) {
                    return;
                }
                var regExp = XRegExp('\p{Han}');

                scope.$watch(function() {
                    return ngModel.$modelValue;
                }, function(newValue, oldValue) {
                    if (!regExp.test(newValue)) {
                        ngModel.$setViewValue(newValue);
                    } else {
                        ngModel.$setViewValue(oldValue);
                        ngModel.$render();
                    }
                });
            }
        };
    }

【讨论】：