HTML required属性

required属性是HTML5新增的布尔属性，用于标记表单字段为必填项，表单提交时浏览器自动验证字段是否有值。

基本语法

<input type="text" required>
<input type="text" required="required">
<!-- 两种写法效果相同 -->

适用元素

代码示例

基本用法

<form>
  <label>用户名：</label>
  <input type="text" name="username" required>
  <br><br>

  <label>邮箱：</label>
  <input type="email" name="email" required>
  <br><br>

  <button type="submit">提交</button>
</form>

select必选

<form>
  <label>城市：</label>
  <select name="city" required>
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
  <br><br>

  <button type="submit">提交</button>
</form>

textarea必填

<form>
  <label>留言内容：</label>
  <br>
  <textarea name="message" required rows="4" cols="40"></textarea>
  <br><br>

  <button type="submit">提交</button>
</form>

checkbox必选

<form>
  <label>
    <input type="checkbox" name="agree" required>
    我已阅读并同意用户协议
  </label>
  <br><br>

  <button type="submit">注册</button>
</form>

radio必选

<form>
  <label>性别：</label>
  <label>
    <input type="radio" name="gender" value="male" required> 男
  </label>
  <label>
    <input type="radio" name="gender" value="female"> 女
  </label>
  <br><br>

  <button type="submit">提交</button>
</form>
<!-- 同一组radio只需一个设置required -->

配合CSS样式

<style>
  /* 必填字段标记 */
  input:required {
    border-left: 3px solid #e74c3c;
  }

  /* 验证通过样式 */
  input:required:valid {
    border-left-color: #27ae60;
  }

  /* 验证失败样式 */
  input:required:invalid:not(:placeholder-shown) {
    border-left-color: #e74c3c;
    background-color: #ffe6e6;
  }
</style>

<form>
  <input type="text" required placeholder="必填字段">
  <button type="submit">提交</button>
</form>

JavaScript检测

<form id="myForm">
  <input type="text" id="name" required placeholder="姓名">
  <span id="nameError"></span>
  <br>
  <button type="submit">提交</button>
</form>

<script>
  const nameInput = document.getElementById('name');
  const nameError = document.getElementById('nameError');

  nameInput.addEventListener('input', () => {
    if (nameInput.validity.valueMissing) {
      nameError.textContent = '姓名不能为空';
    } else {
      nameError.textContent = '';
    }
  });

  document.getElementById('myForm').addEventListener('submit', (e) => {
    if (!nameInput.checkValidity()) {
      e.preventDefault();
      nameError.textContent = '请填写姓名';
    }
  });
</script>

检测是否必填

const input = document.querySelector('input');

// 检测是否设置了required
if (input.required) {
  console.log('该字段是必填项');
}

// 动态设置required
input.required = true;  // 设为必填
input.required = false; // 取消必填

注意：required只检查是否有值，不检查值的有效性。如需同时验证格式，需配合pattern、type等属性。空格也算有值，如需排除空格需额外处理。

要点总结

1. required是布尔属性，设置即为必填
2. 适用于input、select、textarea元素
3. 验证失败时validity.valueMissing为true
4. 同组radio只需一个设置required
5. 可通过JS的required属性动态设置或读取