Question

我在代码中使用正则表达式来验证名称并发送表单，我只需要使用它即可获得帮助。

名称应以大写字母开头，可以使用2-3个单词，并且可以用撇号，空格或破折号分隔，例如：

维克多·雨果

Jeanne D'arc

让·马克·艾罗（Jean-Marc Ayrault）

我尝试使用/^[A-z][a-z]/以大写字母开头但是我不知道如何继续验证空格，破折号和撇号。

/^[A-z][a-z]/

我不知道如何继续，谢谢您的帮助。

Answer 1

您可以使用此正则表达式，

\b[A-Z][a-z]*(?:'[a-z]+)?(?:[ -][A-Z][a-z]*(?:'[a-z]+)?)*\b

说明：

\b[A-Z][a-z]*-开始匹配单词边界和大写字母，然后是零个或多个小写字母
(?:'[a-z]+)?-（可选）后跟'和一些小写字母。如果您想重复多次，请将?更改为*，就像您真的想支持D'arcd'arc这样的名称一样，我怀疑您是否想要这样做，这就是为什么我保留{ {1}}
?-开始另一个非分组模式，并开始与空格或连字符匹配
(?:[ -]-进一步匹配与正则表达式开头相同的结构，并且匹配零次或多次。
[A-Z][a-z]*(?:'[a-z]+)?)*-看到单词边界后停止

Demo

Answer 2

您可以尝试以下代码：

为此，我建议与https://regexr.com/一起玩，这非常方便！

我添加了一个isValidNameStrict，该名称只接受名称中有限数量的字符。

根据需要修改[a-z']组，以添加其他字符。

public mouseEnter($event, data): void {
  const circle = $event.target as HTMLElement;
  const parent = circle.parentElement;
  const circleCoords = circle.getBoundingClientRect();
  const parentCoords = parent.getBoundingClientRect();
  const relativeX = circleCoords.left - parentCoords.left;
  const relativeY = circleCoords.top - parentCoords.top;
  const x = `${relativeX + 20}px`;
  const y = `${relativeY + 20}px`;
  this.renderer.setStyle(this.tooltip.nativeElement, 'left', x);
  this.renderer.setStyle(this.tooltip.nativeElement, 'top', y);
  this.renderer.setStyle(this.tooltip.nativeElement, 'display', 'block');
  this.renderer.setProperty(this.tooltip.nativeElement, 'innerHTML', data);
}

使用正则表达式进行名称验证

2 个答案: