Question

我试图设置html表单元素的自定义有效性，添加一个设置自定义有效性的处理函数，以及元素＆＃34;无效＆＃34;事件。但是，由于每次用户在输入浏览器中输入内容时都会触发此事件，因此会在键入的每个符号上显示notitfication。我想让用户完成他的打字尝试并在输入失去焦点后显示通知。我怎么能用html5验证呢？

Answer 1

如果您不想使用JS或Angular等框架，那么表单验证非常简单。您可以尝试使用CSS实现此目的，并使验证更加微妙，可能是绿点或复选标记或红点，或x ....等等，如下所示：

Username: <input type="username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" required>


input:required:invalid, input:focus:invalid {
   background-image:url(images/green_dot.png)
   background-position: right top;
   border:none;
}
input:required:valid {
   background-image:url(images/red_dot.png)
   background-position: right top;
   border: none;
}

您可以尝试使用CSS，这样可以获得更清晰的HTML表单验证。希望它能以某种方式帮助你！

防止输入时弹出html5无效通知

1 个答案: