使用jQuery验证表单域并删除错误

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

<form id="myForm">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" class="required">
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" class="required">
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" class="required">
  </div>
  <button type="submit">提交</button>
</form>

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

    var isValid = true; // 标记表单是否通过验证

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

    if (isValid) {
      // 表单通过验证，可以进行提交操作
      // 可以在这里调用后端接口或执行其他操作
      console.log('表单验证通过');
    }
  });
});

.error {
  border: 1px solid red;
}