jQuery如何使用5步滑动表单添加表单验证

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

<form id="myForm">
  <input type="text" id="name" placeholder="姓名">
  <input type="email" id="email" placeholder="邮箱">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

$(document).ready(function() {
  $('#myForm').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    
    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();
    
    // 表单验证逻辑
    if (name === '') {
      alert('请输入姓名');
      return;
    }
    
    if (email === '') {
      alert('请输入邮箱');
      return;
    }
    
    if (password === '') {
      alert('请输入密码');
      return;
    }
    
    // 表单验证通过，执行滑动效果
    $('html, body').animate({
      scrollTop: $('#myForm').offset().top
    }, 1000);
  });
});

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#myForm {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input, button {
  margin: 10px;
}