Angular 指令正则表达式字母数字验证答案

【问题标题】：Angular Directive Regex Alphanumeric ValidationAngular 指令正则表达式字母数字验证
【发布时间】：2020-04-21 18:48:29
【问题描述】：

我对 Angular 和 Regex 有点陌生，但我目前遇到了一个问题。我需要创建一个允许输入字段执行以下操作的 Angular 指令：

仅限字母数字
第一个输入必须是字母
单词之间只有一个空格
无特殊字符

我已经完成了第 1-3 个问题，我的问题出现在第 4 个问题中。输入仍然接受 '_' 、 '`' 、 '&' 、 '^' 和一些其他特殊字符。我只需要否定所有特殊字符。

这是我的指令：

export class AlphaNumericFieldDirective{
  private regex: RegExp = new RegExp(/^[a-zA-Z]([a-zA-Z0-9]+ ?)*$/);
  private specialKeys: Array<string> = ['Backspace', 'Space', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
   if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
   }
   let current: string = this.el.nativeElement.value;
   let next: string = current.concat(event.key);
   if (next && !String(next).match(this.regex)) {
      event.preventDefault();
   }
  }  
 }

here 是示例输出，其中包含我想要否定的一些字符

非常感谢您的帮助，谢谢

【问题讨论】：

模式与&或,regex101.com/r/awmy64/1不匹配
抱歉这个菜鸟问题，但是模式不匹配 & 或 , 是什么意思？
我添加了一个显示匹配项的示例链接。模式^[a-zA-Z](\w+ ?)*$ 以匹配 a-zA-Z 开始，并可选择重复匹配 1+ 个单词字符和一个可选空格。它不匹配“特殊”字符，但_ 匹配\w
我尝试将\w 更改为[a-zA-Z0-9]。输入 _ 时，它现在被否定并且不再显示在该字段中，但是其他符号，例如锐角、& 和插入符号仍然出现。抱歉，我真的很难理解正则表达式。
您能否更新问题，说明您如何使用不适合您的代码？这样人们就可以更好地帮助您。

标签： regex angular typescript validation logic

【解决方案1】：

这个解决方案对我有用。

    import { Directive, HostListener } from "@angular/core";
    
    @Directive({
        selector: "[appAlphabetOnly]",
    })
    export class AlphabetOnlyDirective {
    @HostListener("keydown", ["$event"]) public onKeydown(event: KeyboardEvent) {
        if (
            (event.keyCode >= 15 && event.keyCode <= 64) ||
            event.keyCode >= 123 ||
            (event.keyCode >= 96 && event.keyCode <= 105)
        ) {
            event.preventDefault();
        }
    }
}

【讨论】：