使用jquery验证视图中的空值

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" class="required" />

  <label for="email">邮箱：</label>
  <input type="email" id="email" class="required" />

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

$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    var isValid = true;

    $('.required').each(function() {
      var value = $(this).val().trim();
      if (value === '') {
        $(this).addClass('error');
        isValid = false;
      } else {
        $(this).removeClass('error');
      }
    });

    if (isValid) {
      // 执行表单提交操作
      // ...
    }
  });
});

.error {
  border: 1px solid red;
}

.error-message {
  color: red;
  font-size: 12px;
}

$('.required').each(function() {
  // ...

  if (value === '') {
    $(this).addClass('error');
    $(this).after('<div class="error-message">该字段不能为空</div>');
    isValid = false;
  } else {
    $(this).removeClass('error');
    $(this).next('.error-message').remove();
  }
});