javascript - 向输入字段添加自定义验证

Question

我正在尝试对我的文本输入类型添加自定义验证。顺便说一下，我正在使用 Angular。

代码如下:

<div class="form-group">
  <label class="control-label">text</label>
  <input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required>
  <p class="form-group-note">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

我想添加 2 个验证:1) 不能为空 2) 文本的最小长度为 6 个字符。我希望在按下网络应用程序上的提交按钮时触发此验证。

感谢任何建议!

Answer 1

您可以使用 HTML 输入标签属性实现此目的。

<input type="text" pattern="^.{5,}" required>

required属性告诉输入不能为空

pattern="^.{5,}"防止输入短于 6 个字符。

如果您的 <input> 将触发此验证在<form>里面喜欢:

<form action="">
  <input type="text" pattern="^.{5,}" required>
  <input type="submit">
</form>

如果您想阅读有关该主题的更多信息，请参阅 MDN