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

Question

Is there a way to use ng-pattern in form validation to validate any letter from any alphabet (latin, chinese, korean, russian, ...).

I found a solution with the XRegExp library, but will not work with ng-pattern since it is expecting a string regex.

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

One solution is too build my own validator directive, but I would prefer to use ng-pattern if possible.

Answer 1

You can still use that regex in ng-pattern. You just have to pass a regex literal as a string like this:

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

Answer 2

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

allow any characters (include utf-8) and limit 3-20 characters, or

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

allow any characters and limit 4-20 character and except *?& (add more characters to except )

Answer 3

I would suggest using a custom directive attribute, works fine for me. For example, below we are disallow Chinese characters for 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();
                    }
                });
            }
        };
    }

Answer 4

You need to add the u flag for Unicode support. That way you can specify patterns that include character categories, such as \p{L} for a letter in any language, \p{M} for an accent mark in any language.

Example:

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

Explanation:

• [\p{L}\p{M}] -- any letter in any alphabet, including accent mark
• \p{Zs} -- space separator in any language
• above pattern allows space, ' , and - at the end, you can tweak the pattern if you want to avoid that

See details on Unicode and character categories at https://javascript.info/regexp-unicode

Answer 5

Yes, you can use the ng-pattern directive in Angular forms to validate input containing letters from any alphabet.

To validate any letter from any alphabet, you can use the \p{L} character class in a regular expression. The \p{L} character class matches any letter from any alphabet, including Latin, Chinese, Korean, Russian, and more.

Here is an example of how to use the ng-pattern directive with the \p{L} character class to validate input that may contain letters from any alphabet:

<form name="myForm">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" ng-model="name" ng-pattern="/^[\p{L}]+$/"><br>
  <span ng-show="myForm.name.$error.pattern">Invalid name</span>
</form>

In this example, the ng-pattern directive is used to apply a regular expression to the name input field. The regular expression /^[\p{L}]+$/ allows any letter from any alphabet, and the ng-show directive is used to display an error message if the input does not match the pattern.