博客

什么是jQuery中的非侵入式验证

  • Post category:jquery

jQuery中的非侵入式验证是一种常用的客户端数据验证方式，旨在通过JavaScript对用户输入的数据进行实时验证，确保数据的有效性。这种验证方式不需要修改页面原有的HTML代码和CSS样式，不会影响页面的布局和样式，因此被称为非侵入式验证。

实现jQuery中的非侵入式验证大致分为以下几个步骤：

1. 引入jQuery库和验证插件

需要在HTML页面中引入jQuery库和验证插件，如下所示：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

2. 创建表单

在HTML页面中创建表单，并为需要验证的表单元素添加name属性和验证规则，如下所示：

<form id="myForm">
  <div>
    <label for="username">用户名:</label>
    <input type="text" name="username" required minlength="2" maxlength="10">
  </div>
  <div>
    <label for="password">密码:</label>
    <input type="password" name="password" required minlength="6" maxlength="20">
  </div>
  <div>
    <input type="submit" value="提交">
  </div>
</form>

3. 编写验证代码

使用jQuery的validate方法进行表单验证，并定义验证规则和错误提示信息，如下所示：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 2,
      maxlength: 10
    },
    password: {
      required: true,
      minlength: 6,
      maxlength: 20
    }
  },
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: "用户名长度不能少于2个字符",
      maxlength: "用户名长度不能超过10个字符"
    },
    password: {
      required: "密码不能为空",
      minlength: "密码长度不能少于6个字符",
      maxlength: "密码长度不能超过20个字符"
    }
  }
});

4. 美化错误提示信息

借助插件中的errorPlacement方法对错误提示信息进行自定义美化，如下所示：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 2,
      maxlength: 10
    },
    password: {
      required: true,
      minlength: 6,
      maxlength: 20
    }
  },
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: "用户名长度不能少于2个字符",
      maxlength: "用户名长度不能超过10个字符"
    },
    password: {
      required: "密码不能为空",
      minlength: "密码长度不能少于6个字符",
      maxlength: "密码长度不能超过20个字符"
    }
  },
  errorPlacement: function(error, element) {
    $(element).next().remove();
    $(element).after('<span class="error">' + error.text() + '</span>');
  }
});

一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery Validation Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
  <style>
    .error {color: red;margin-left: 5px;}
  </style>
</head>
<body>
  <form id="myForm">
    <div>
      <label for="username">用户名:</label>
      <input type="text" name="username" required minlength="2" maxlength="10">
    </div>
    <div>
      <label for="password">密码:</label>
      <input type="password" name="password" required minlength="6" maxlength="20">
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
  <script>
    $(function() {
      $("#myForm").validate({
        rules: {
          username: {
            required: true,
            minlength: 2,
            maxlength: 10
          },
          password: {
            required: true,
            minlength: 6,
            maxlength: 20
          }
        },
        messages: {
          username: {
            required: "用户名不能为空",
            minlength: "用户名长度不能少于2个字符",
            maxlength: "用户名长度不能超过10个字符"
          },
          password: {
            required: "密码不能为空",
            minlength: "密码长度不能少于6个字符",
            maxlength: "密码长度不能超过20个字符"
          }
        },
        errorPlacement: function(error, element) {
          $(element).next().remove();
          $(element).after('<span class="error">' + error.text() + '</span>');
        }
      });
    });
  </script>
</body>
</html>

另一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery Validation Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
  <style>
    .error {color: red;margin-left: 5px;}
  </style>
</head>
<body>
  <form id="myForm">
    <div>
      <label for="email">邮箱:</label>
      <input type="email" name="email" required>
    </div>
    <div>
      <label for="zip">邮编:</label>
      <input type="text" name="zip" pattern="[0-9]{5}" required>
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
  <script>
    $(function() {
      $("#myForm").validate({
        rules: {
          email: {
            required: true,
            email: true
          },
          zip: {
            required: true,
          },
        },
        messages: {
          email: {
            required: "邮箱不能为空",
            email: "请输入正确的邮箱地址"
          },
          zip: {
            required: "邮编不能为空",
            pattern: "请输入正确的邮编格式(5位数字)"
          }
        },
        errorPlacement: function(error, element) {
          $(element).next().remove();
          $(element).after('<span class="error">' + error.text() + '</span>');
        }
      });
    });
  </script>

</body>
</html>

上面两个示例验证了用户名、密码、邮箱和邮编这几个常用表单数据，可以根据具体需求来定义验证规则和错误提示信息。

Tags: