模糊事件处理

Question

我有一个模糊功能来检查输入是否必须包含字母表。我在模糊事件上触发一个函数来检查验证。我的页脚组件中有一个“下一步”按钮，它可以将我导航到下一页。

现在，如果我添加了一个无效的输入（例如：123），然后直接单击“下一步”按钮（不跳出输入字段），我会被重定向，而不是显示字段级别的验证。

有人可以帮助我如何使用JavaScript解决这种情况吗？

我的 Html 代码片段

<mat-form-field>

      <input autocomplete="offf" matInput [formControlName]="'lastName'" maxlength="30" 

       [placeholder]="'Last Name'" 

      (blur)="checkNameValidation($event , 'lastName')"/>

</mat-form-field>

我的 ts 文件函数

checkNameValidation(event , element: string) {

var containsAlphabet = /[a-zA-Z]/.test(event.target.value);

if(!containsAlphabet) {

  this.myForm.get(element).setErrors({'invalid': true});

}

}

Answer 1

你可以试试禁用提交按钮，直到所有表单域都通过为 on 返回 false 如果任何表单域验证失败，则提交表单

Answer 2

在此特定方案中，您应该使用键按下事件。这将帮助您捕获该字段上发生的所有键盘。使用下面的链接进行进一步参考https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event