如何制作自定义验证错误消息？

Question

我怎样才能发出这种错误信息？我正在构建一个登录验证表单。

Answer 1

您可以尽可能简单地尝试一下

<input type= "text" name= "name" pattern= "[0-9]" required="required">

您还可以设置长度

Answer 2

另外：

您可以使用 customValidity api 创建自定义消息，并将使用浏览器提供的默认工具提示。

文档： https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

检查下面的一个简单示例：

https://jsbin.com/popazajawu/2/edit?html,js,console,output

JS:

var inputs = document.querySelectorAll('input');

inputs.forEach(input => {
  input.addEventListener('invalid', function(e) {
    e.target.setCustomValidity("[CUSTOM MESSAGE] This field cannot be left blank")
  })

  input.addEventListener('input', function(e) {
    e.target.setCustomValidity("");
  })
})

如何制作自定义验证错误消息？

How to make custom validation error message?

html

javascript

css

input

error-messaging