jquery实现表单验证并阻止非法提交

下面就是完整攻略。

1. 引入jQuery文件

表单验证需要使用jQuery库，所以要先在HTML文档中引入jQuery文件。可以在head标签内添加如下代码来引入jQuery文件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 编写表单验证代码

使用jQuery来验证表单非常方便，可以通过选择器选中需要验证的表单元素，然后在事件处理函数中编写验证代码。

$(document).ready(function() {
  $("form").submit(function(event) {
    // 阻止表单的提交事件
    event.preventDefault();
    // 获取表单元素
    var name = $("#name").val();
    var email = $("#email").val();
    var password = $("#password").val();
    // 判断表单输入是否合法
    if (name === "" || email === "" || password === "") {
      alert("请填写所有必填项！");
      return false;
    }
    if (password.length < 6) {
      alert("密码长度不能少于6位！");
      return false;
    }
    // 如果表单输入合法，则提交表单
    alert("表单提交成功！");
    $("form").unbind("submit").submit();
  });
});

上面的代码实现了如下的验证逻辑：

• 当用户点击提交按钮时，阻止表单的默认提交事件
• 获取表单中的用户名、邮箱、密码等输入内容
• 判断必填项是否为空，如果为空，则弹出提示并返回false
• 判断密码长度是否小于6位，如果小于6位，则弹出提示并返回false
• 如果以上两个验证都通过，报错“表单提交成功”并提交表单

3. 示例说明

接下来我们通过两个例子来说明上述表单验证的实现方式。

示例1：验证密码长度

在页面中内嵌了一个表单，其中密码输入框要求输入的密码长度至少为6位。如下所示：

<form action="" method="post">
  <label for="name">用户名：</label>
  <input id="name" type="text"/><br>
  <label for="email">邮箱：</label>
  <input id="email" type="email"/><br>
  <label for="password">密码：</label>
  <input id="password" type="password"/><br>
  <input type="submit" value="提交"/>
</form>

然后在页面中引入jQuery文件并编写表单验证代码：

$(document).ready(function() {
  $("form").submit(function(event) {
    // 阻止表单的提交事件
    event.preventDefault();
    // 获取表单元素
    var name = $("#name").val();
    var email = $("#email").val();
    var password = $("#password").val();
    // 判断表单输入是否合法
    if (name === "" || email === "" || password === "") {
      alert("请填写所有必填项！");
      return false;
    }
    if (password.length < 6) {
      alert("密码长度不能少于6位！");
      return false;
    }
    // 如果表单输入合法，则提交表单
    alert("表单提交成功！");
    $("form").unbind("submit").submit();
  });
});

此时，当用户在密码输入框中输入的字符数小于6时，提交表单时会弹出提示信息“密码长度不能少于6位！”并阻止表单的提交。

示例2：验证必填项

此时在页面的表单中将“邮箱”和“用户名”两个表单项都设置为必填项，否则提交表单时会弹出提示信息“请填写所有必填项！”并阻止表单的提交。

<form action="" method="post">
  <label for="name">用户名：</label>
  <input id="name" type="text" required/><br>
  <label for="email">邮箱：</label>
  <input id="email" type="email" required/><br>
  <label for="password">密码：</label>
  <input id="password" type="password"/><br>
  <input type="submit" value="提交"/>
</form>

再次使用上述代码进行验证，此时当用户名和邮箱两个表单项为空时，提交表单时会弹出提示信息“请填写所有必填项！”并阻止表单的提交。