如何使用这些限制验证我的输入字段答案

【问题标题】：How do I validate my input field with these restrictions如何使用这些限制验证我的输入字段
【发布时间】：2020-12-09 01:21:03
【问题描述】：

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

HTML：

<div class="row">
     <label>Address </label>
     <input type "text" class="form-control" id="address" addressDirective [whiteSpaceAllowed]="true"> 
 </div>

TS：

constructor(fb: FormBuilder) {}

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

地址指令.TS

@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

【问题讨论】：

标签： javascript angular

【解决方案1】：

您的 html 中有错字。 S 应该是 whiteSpaceAllowed 时是小写的。在指令中有一个错字export class。在指定 onKeyDown 的那一行，current 是一个来自哪里的变量？对我来说，它可以将current 替换为this.el.nativeElement.value

【讨论】：

谢谢，我更新了更改，但我仍然可以在输入的字母数字字符之间键入多个空格。我还可以在字母数字字符前输入句点。应该是字母数字，单行距，中间允许有句点
您的正则表达式不会检查这些限制。您在评论中指出的这些限制在您的问题中没有得到很好的描述。我建议您编辑您的问题以说明允许哪些模式，您甚至可以添加示例什么是接受的，什么是不接受的。
谢谢，刚刚修复并添加了示例