如何使用HTML、CSS和jQuery实现表单验证功能

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

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

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>

  <input type="submit" value="提交">
</form>

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

    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();

    // 验证姓名是否为空
    if (name === '') {
      showError('请输入姓名');
      return;
    }

    // 验证邮箱格式
    var emailPattern = /^[A-Za-z0-9]+@[A-Za-z0-9]+.[A-Za-z]+$/;
    if (!emailPattern.test(email)) {
      showError('请输入有效的邮箱');
      return;
    }

    // 验证密码长度
    if (password.length < 6) {
      showError('密码长度至少为6位');
      return;
    }

    // 表单验证通过，可以提交表单数据
    // TODO: 提交表单数据到服务器

    // 清除错误信息
    clearError();
  });

  // 显示错误信息
  function showError(message) {
    $('#error').text(message);
  }

  // 清除错误信息
  function clearError() {
    $('#error').text('');
  }
});

<div id="error"></div>

#error {
  color: red;
  margin-top: 10px;
}