菜鸟教程
教程 jquery tutorial

表单验证

表单验证是确保用户输入合法性的重要步骤，借助 jQuery 可以方便地实现实时校验和提示反馈。

验证目标

  • 检查必填项是否为空
  • 校验邮箱、手机号等格式
  • 实时提示输入错误
  • 阻止非法数据提交

示例表单结构

html 
<form id="myForm">
  <label>
    用户名：
    <input type="text" name="username" />
  </label>
  <label>
    邮箱：
    <input type="email" name="email" />
  </label>
  <label>
    手机号：
    <input type="text" name="phone" />
  </label>
  <button type="submit">提交</button>
  <p id="msg" style="color: red; margin-top: 10px;"></p>
</form>

jQuery 验证逻辑

js 
$(function () {
  $("#myForm").submit(function (e) {
    e.preventDefault();

    const username = $("input[name='username']").val().trim();
    const email = $("input[name='email']").val().trim();
    const phone = $("input[name='phone']").val().trim();
    const $msg = $("#msg");

    if (!username) {
      $msg.text("用户名不能为空");
      return;
    }

    if (!/^\w+@\w+\.\w+$/.test(email)) {
      $msg.text("邮箱格式不正确");
      return;
    }

    if (!/^1\d{10}$/.test(phone)) {
      $msg.text("手机号格式错误，应为11位数字");
      return;
    }

    $msg.css("color", "green").text("验证通过，正在提交...");
    // 模拟提交
    setTimeout(() => {
      $msg.text("提交成功！");
    }, 1000);
  });
});

提示样式建议

  • 利用颜色提示错误或成功
  • 鼠标聚焦时清空提示
  • 错误信息放在表单下方或输入框旁边

完整示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="myForm">
  <label>用户名：<input type="text" name="username" /></label><br />
  <label>邮箱：<input type="email" name="email" /></label><br />
  <label>手机号：<input type="text" name="phone" /></label><br />
  <button type="submit">提交</button>
  <p id="msg" style="color: red; margin-top: 10px;"></p>
</form>

<script>
$(function () {
$("#myForm").submit(function (e) {
e.preventDefault();
const username = $("input[name=‘username’]").val().trim();
const email = $("input[name=‘email’]").val().trim();
const phone = $("input[name=‘phone’]").val().trim();
const $msg = $("#msg");


  if (!username) {
    $msg.text(&quot;用户名不能为空&quot;);
    return;
  }

  if (!/^\w+@\w+\.\w+$/.test(email)) {
    $msg.text(&quot;邮箱格式不正确&quot;);
    return;
  }

  if (!/^1\d{10}$/.test(phone)) {
    $msg.text(&quot;手机号格式错误，应为11位数字&quot;);
    return;
  }

  $msg.css(&quot;color&quot;, &quot;green&quot;).text(&quot;验证通过，正在提交...&quot;);
  setTimeout(() =&gt; {
    $msg.text(&quot;提交成功！&quot;);
  }, 1000);
});



});
</script>

相关内容