利用 jQuery 进行表单验证可以通过监听表单提交事件，在提交之前检查表单字段是否符合要求。以下是一个简单的示例，演示了如何使用 jQuery 进行表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<style>
  .error {
    color: red;
  }
</style>
</head>
<body>

<form id="myForm">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <span id="usernameError" class="error"></span>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span id="emailError" class="error"></span>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <span id="passwordError" class="error"></span>
  </div>
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myForm").submit(function(event) {
    // 阻止默认的表单提交行为
    event.preventDefault();

    // 表单验证
    var username = $("#username").val();
    var email = $("#email").val();
    var password = $("#password").val();
    var isValid = true;

    // 验证用户名
    if (username === "") {
      $("#usernameError").text("Username is required.");
      isValid = false;
    } else {
      $("#usernameError").text("");
    }

    // 验证邮箱
    if (email === "") {
      $("#emailError").text("Email is required.");
      isValid = false;
    } else if (!isValidEmail(email)) {
      $("#emailError").text("Invalid email format.");
      isValid = false;
    } else {
      $("#emailError").text("");
    }

    // 验证密码
    if (password === "") {
      $("#passwordError").text("Password is required.");
      isValid = false;
    } else {
      $("#passwordError").text("");
    }

    // 如果所有字段验证通过，则提交表单
    if (isValid) {
      this.submit();
    }
  });

  // 邮箱格式验证函数
  function isValidEmail(email) {
    var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailPattern.test(email);
  }
});
</script>

</body>
</html>

在这个示例中：

当用户尝试提交表单时，会触发表单的 submit 事件。jQuery 监听了这个事件，并在提交之前进行表单验证。
如果任何一个字段未通过验证，则会在字段旁边显示相应的错误信息。
如果所有字段都通过验证，则表单会被提交。
isValidEmail 函数用于验证邮箱格式是否正确。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/validation.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！