jquery实现简单的表单验证

2023年6月10日下午6:59 • JavaScript

下面是jQuery实现简单的表单验证的完整攻略：

1. 导入jQuery库文件

要使用jQuery，首先需要在页面头部导入jQuery库文件，可以从官网下载或直接使用CDN加速链接。示例：

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

2. 给表单元素添加验证规则

针对表单元素的常规验证规则，可以使用jQuery提供的一些选择器和正则表达式来进行筛选，并给满足规则的元素添加需要的属性和样式。示例：

<!-- 示例1：邮箱格式验证规则 -->
<input type="text" id="email" placeholder="请输入邮箱">
<span id="emailError" style="display:none;color:red;">邮箱格式不正确</span>

<script>
  $(function() {
    $(document).on("blur", "#email", function() {
      var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      var email = $(this).val();
      if (!reg.test(email)) {
        $("#emailError").show();
      } else {
        $("#emailError").hide();
      }
    });
  });
</script>

<!-- 示例2：密码长度验证规则 -->
<input type="password" id="password" placeholder="请输入密码">
<span id="passwordError" style="display:none;color:red;">密码长度必须在6-12位之间</span>

<script>
  $(function() {
    $(document).on("blur", "#password", function() {
      var password = $(this).val();
      if (password.length < 6 || password.length > 12) {
        $("#passwordError").show();
      } else {
        $("#passwordError").hide();
      }
    });
  });
</script>

3. 表单提交时进行统一校验

当表单中有多个元素需要校验时，可以在表单提交之前进行统一校验，如果不满足规则则取消提交操作。示例：

<!-- 示例3：表单提交时进行统一校验 -->
<form id="demoForm" action="">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <input type="text" name="email" placeholder="请输入邮箱">
  <input type="submit" value="注册">
</form>

<script>
  $(function() {
    $("#demoForm").submit(function() {
      var flag = true;
      var username = $("input[name='username']").val();
      var password = $("input[name='password']").val();
      var email = $("input[name='email']").val();
      var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

      if (username.length < 2) {
        $("#usernameError").show();
        flag = false;
      }
      if (password.length < 6 || password.length > 12) {
        $("#passwordError").show();
        flag = false;
      }
      if (!reg.test(email)) {
        $("#emailError").show();
        flag = false;
      }

      return flag;
    });
  });
</script>

在该示例中，统一校验了表单中的用户名、密码和邮箱三个元素，如果其中任意一个不满足规则，则不允许提交表单，同时会在对应的错误提示信息下显示错误提示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简单的表单验证 - Python技术站