在 web 前端开发中，表单是我们经常会遇到的一个重要元素。而其中的输入框是表单中最常用的组件之一。在实际开发中，我们经常会遇到需要用户输入邮箱地址的情况。为了确保用户输入的是有效的邮箱地址，我们通常会给输入框添加 required 属性，以便在用户未输入内容或输入内容不符合规范时进行提示。
什么是 required 属性
在 HTML5 中，required 属性是一个布尔属性，用于指定输入框的值是必填项。当用户提交表单时，如果带有 required 属性的输入框没有填写内容，浏览器会阻止表单的提交，并提示用户必须填写该项。这样可以有效减少用户输入错误或遗漏必填信息的情况。
在 input 标签中使用 required 属性
要在输入框中使用 required 属性，只需要在 input 标签中添加 required 属性即可。在需要用户输入邮箱地址的情况下，我们通常会使用 type="email" 属性来指定输入框的类型为邮箱地址。结合 required 属性，可以确保用户输入的是有效的邮箱地址。
示例代码如下：
------ ------ -------------------------- ------ ------------ ---------- ------------ --------- ------- ----------------------------- -------
在上面的示例中，我们创建了一个简单的表单，其中包含一个用于输入邮箱地址的输入框。输入框的类型为 email，同时添加了 required 属性，确保用户必须填写该项才能提交表单。
required 属性的浏览器支持
大多数现代浏览器都支持 required 属性，包括 Chrome、Firefox、Safari 和 Edge 等。当用户尝试提交一个带有 required 属性的表单，但其中的必填项未填写时，浏览器会自动给出提示，告知用户有必填项未填写。
自定义 required 提示信息
有时候浏览器默认的 required 提示信息可能不够清晰或不符合设计需求。在这种情况下，我们可以使用 JavaScript 来自定义提示信息。通过监听表单的 submit 事件，我们可以在用户尝试提交表单时检查必填项是否已填写，如果未填写，则显示自定义的提示信息。
示例代码如下：
----- ------------
------ --------------------------
------ ------------ ---------- ------------ ---------
------- -----------------------------
-------
--------
----- ---- - ----------------------------------
------------------------------- --------------- -
----- ---------- - ---------------------------------
-- ------------------- -
------------- ----- ---- ----- ----------
-----------------------
-
---
---------在上面的示例中，我们通过 JavaScript 监听了表单的 submit 事件，并在用户尝试提交表单时检查了邮箱输入框是否已填写。如果未填写，则显示了自定义的提示信息，并阻止了表单的提交。
通过使用 required 属性，我们可以有效确保用户输入的邮箱地址是有效的，并且在用户未填写必填项时进行提示，提高了用户体验和数据的准确性。