时间戳

首页 > 解决方案 > 如何验证 Angular 2 中的输入

angular - 如何验证 Angular 2 中的输入

问题描述

我有一个输入位置，我希望这个输入的长度从 3 到 7 并且不允许特殊字符。

<input  required maxlength="7" minlength="3" class="plate"  type="text"  #a>

我试过了，但我想在我离开输入位置时打印一条消息而没有正确填写

标签： angularvalidationinput

解决方案

您可以使用适当的正则表达式模式添加模式属性，如下所示：

模式="[A-Za-z0-9]{3,7}"

完整输入示例：

<input required class="plate" type="text" pattern="[A-Za-z0-9]{3,7}" #a>

要验证输入：

为简单起见，您可以使用 input:invalid CSS 选择器：

<input required class="plate" type="text" pattern="[A-Za-z0-9]{3,7}" #a>
<span class="validation-msg">Not Valid</span>

.validation-msg {
    display: inline-block;
}
input:invalid {
    color: red;
}

input:invalid ~ .validation-msg {
    display: inline-block;
  }

或用于功能强大的模板表单。 https://angular.io/guide/forms

推荐阅读