Javascript 如何使用这些限制验证输入字段

所以我试图验证一个有一些限制的字段。我的设置看起来正确，但由于某些原因，我没有得到正确的结果。用户可以输入带或不带句点（“.”）的字母数字字符以及字符之间的单个空格。以下是HTML的外观：

HTML:

地址指令

@Directive({
selector: '[addressDirective]'
})

export class AddressDirective {

@Input() 
whiteSpaceAllowed: boolean = false;

private regexWithWhiteSpace = new RegExp(/^[A-Za-z0-9. ]*$/g);

private specialKeys: Array<>string = ['Backspace', 'Tab','End','Home','.'];

constructor(private el: ElementRef) {}

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

---

你的html中有输入错误

S

应为

whiteSpaceAllowed

时为小写。在指令中，

导出类

处有一个输入错误。在指定onKeyDown的行中，

current

是来自何处的变量？对我来说，它可以代替

当前的
来使用
这个.el.nativeElement.value
谢谢，我更新了更改，但我仍然能够在输入中的字母数字字符之间键入多个空格。我还能够在字母数字字符之前输入句点。应该是字母数字，单间隔，中间允许有一个句点。您的正则表达式不检查这些限制。你在评论中指出的这些限制在你的问题中没有得到很好的描述。我建议你编辑你的问题，说什么样的模式是允许的，你甚至可以添加一些例子什么是可以接受的，什么是不可以的。谢谢，刚刚修复并添加了一些例子
constructor(fb: FormBuilder) {}

buildForm() {
 this.form = this.fb.group({
 address: ['', [Validators.pattern('[A-Za-z0-9. ]')]]
});

@Directive({
selector: '[addressDirective]'
})

export class AddressDirective {

@Input() 
whiteSpaceAllowed: boolean = false;

private regexWithWhiteSpace = new RegExp(/^[A-Za-z0-9. ]*$/g);

private specialKeys: Array<>string = ['Backspace', 'Tab','End','Home','.'];

constructor(private el: ElementRef) {}

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

"ABC12" //alphanumeric, periods not required
"ABC12. dE4" // single spaced no periods before or after