📌  相关文章
📜  如何指定必须在 HTML 中提交表单之前填写的输入字段?(1)

📅  最后修改于: 2023-12-03 15:38:47.564000             🧑  作者: Mango

在HTML中,可以通过设置 "required" 属性来指定必须在提交表单之前填写的输入字段。下面是如何使用此属性:

  1. 在表单元素中添加 "required" 属性
<form>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>

上述代码中,在 <input> 元素中添加了 "required" 属性,这将强制用户在表单提交之前填写这些输入字段。

  1. 使用 JavaScript 添加 "required" 属性

如果想要根据代码逻辑来添加 "required" 属性,可以使用 JavaScript 来实现。

例如,以下代码检查了表单中是否填写了 "name" 和 "email" 字段,并将它们标记为必须填写的字段:

<form>
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit" onclick="checkForm(event)">
</form>

<script>
function checkForm(event) {
  var nameInput = document.getElementsByName('name')[0];
  var emailInput = document.getElementsByName('email')[0];
  
  if (!nameInput.value.trim()) {
    nameInput.setCustomValidity('Please enter your name');
    event.preventDefault();
  } else {
    nameInput.setCustomValidity('');
  }
  
  if (!emailInput.value.trim()) {
    emailInput.setCustomValidity('Please enter your email');
    event.preventDefault();
  } else {
    emailInput.setCustomValidity('');
  }
}
</script>

上述代码中,JavaScript 代码会在用户点击提交按钮时运行。它会检查每个输入字段是否为空,如果为空,则将其标记为必填字段,并阻止表单提交。如果输入字段不为空,则取消必填标记。