PCRE 的 ng 模式答案

【问题标题】：ng-pattern for PCREPCRE 的 ng 模式
【发布时间】：2021-07-10 10:12:39
【问题描述】：

我有一个输入文本字段的模式：/[\p{L}\'.\- ]{3,30}/ 我的目的是接受世界上几个字母表中最广泛的人名（拉丁文、中文等）。它在 Regex101 中进行了测试并且可以正常工作伟大的。在其他测试仪上不起作用，但我的主要问题如下：

<form action="mailto:myemail@emailserver.com" id="formula" method="post" enctype="multipart/form-data" 
name="formname" class="form-group pt-3" autocomplete="on" ng-submit="register()" novalidate>
<input type="text" name="nombre" ng-pattern="/[\p{L}\'.\- ]{3,30}/">

我分享我的代码供您检查：https://regex101.com/r/gOvO2M/8 它跳过特殊字符、跳过符号、跳过数字，但是当我在浏览器中看到实时 html 时，它无法正常工作。

在错误消息中，出于验证目的，我输入：

<p class="formu-error" ng-show="formname.nombre.$touched && formname.nombre.$invalid">Please, write a valid name.</p>

问题是在测试时，我只写字母（没有空格，没有连字符，因为所有这些都是可选的）并且仍然给 mem 错误消息。为什么？

也许是因为我使用的是\p{L}，当我在 PHP 中编写服务器验证代码时，它只能在服务器中工作？

【问题讨论】：

试试ng-pattern="/^[\p{L}'. -]{3,30}$/u"，我建议添加ng-trim="false"。
@WiktorStribiżew，谢谢，它在 html 形式（另存为 php）中运行良好。但是，它在开始时仍然接受很多空间。例如，我想允许名字或姓氏之间有空格，但开头不允许有多余的空格。我应该更好地使用 PHP 修剪功能在服务器上实现它吗？我真的不明白什么是ng-trim="false" 将完全工作。我只知道它不会自动修剪空格，但我没有找到视频解释清楚。
如果您不想在开头和结尾允许空格，您需要ng-pattern="/^\p{L}[\p{L}'. -]{1,28}\p{L}$/u" ng-trim="false"。或者，如果您需要禁止连续的空格和撇号 - ng-pattern="/^(?=.{3,30}$)\p{L}+(?:['. -]\p{L}+)*$/u" ng-trim="false"

标签： regex validation angular-ngmodel ng-pattern html5-formvalidation

【解决方案1】：

你可以使用

<input type="text" name="nombre" ng-pattern="/^(?=.{3,30}$)\p{L}+(?:['.\s-]\p{L}+)*$/u" ng-trim="false" />

注意 u 标志，它启用了 JavaScript 中的 Unicode 类别（属性）类支持，并支持 ECMAScript 2018+。

另外，ng-trim="false" 将防止在将输入传递给正则表达式引擎之前修剪空白。

正则表达式的意思是：

^ - 字符串开头
(?=.{3,30}$) - 字符串必须由 3 到 30 个字符组成，而不是换行符
\p{L}+ - 一个或多个 Unicode 字母
(?:['.\s-]\p{L}+)* - 零次或多次重复
- ['.\s-] - '、.、空格或-
- \p{L}+ - 一个或多个 Unicode 字母
$ - 字符串结束。

请参阅regex demo。

【讨论】：