jquery Validation表单验证使用详解

jQuery Validation表单验证使用详解

jQuery Validation是一种用于客户端表单验证的插件，使用它可以轻松地对表单数据进行预处理，从而加强表单数据的有效性。下面将对jQuery Validation的使用进行详细讲解。

引入jQuery Validation插件

首先，需要在页面中引入jQuery和jQuery Validation插件。可以通过以下方式引入jQuery和jQuery Validation插件：

<!-- 引入jQuery和jQuery Validation插件 -->
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>

基本用法

基本上，使用jQuery Validation的方法非常简单，只需要在表单标签上添加一个id属性，然后使用jQuery载入表单的验证规则即可。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Validation Plugin Demo</title>
  <script src="jquery.js"></script>
  <script src="jquery.validate.js"></script>
</head>
<body>
  <form id="myform">
    <label for="name">名称（必填）</label>
    <input id="name" name="name" required>
    <br>
    <label for="email">邮件（必填）</label>
    <input id="email" name="email" type="email" required>
    <br>
    <label for="password">密码（至少6个字符）</label>
    <input id="password" name="password" type="password" minlength="6">
    <br>
    <button id="submit" type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $("#myform").validate();
    });
  </script>
</body>
</html>

在这个例子中，我们可以看到，我们是在表单标签上设置了id属性，然后通过使用$("#myform").validate();方法来加载表单的验证规则的。

为了使表单验证更加完善，可以在表单标签上添加必填、最小长度、邮箱等验证规则，例如，required表示必填，email表示邮箱格式，minlength表示最小长度等等：

<input id="password" name="password" type="password" minlength="6">

自定义验证

除此之外，jQuery Validation还提供了另一个有用的功能：自定义验证器。通过自定义验证器，可以根据自己的需要进行表单验证。下面是一个示例，在这个示例中，我们创建了一个自定义验证器，用于确保用户输入的密码包含数字和字母：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Validation Plugin Demo</title>
  <script src="jquery.js"></script>
  <script src="jquery.validate.js"></script>
</head>
<body>
  <form id="myform">
    <label for="name">名称（必填）</label>
    <input id="name" name="name" required>
    <br>
    <label for="email">邮件（必填）</label>
    <input id="email" name="email" type="email" required>
    <br>
    <label for="password">密码（至少6个字符，必须包含字母和数字）</label>
    <input id="password" name="password" type="password" minlength="6" data-rule-reg="[A-Za-z].*[0-9]|[0-9].*[A-Za-z]">
    <br>
    <button id="submit" type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $.validator.addMethod(
        "reg",
        function(value, element, reg) {
          return reg.test(value);
        },
        "必须包含字母和数字"
      );
      $("#myform").validate();
    });
  </script>
</body>
</html>

在这个示例中，我们使用$.validator.addMethod()方法，添加了一个名为reg的自定义验证器。这个验证器接受三个参数，分别是输入值(value)、元素(element)和一个正则表达式(reg)。

并且我们添加了一个data-rule-reg属性，将正则表达式添加到输入框中即可。

高级用法

如果需要进行更复杂的表单验证，jQuery Validation还支持多种策略。下面是一些常见的策略：

remote：异步验证(input依赖ajax)
rangelength：长度范围验证
range：数值范围验证
max/min：最大值/最小值验证

在下面的例子中，我们将使用jQuery Validation插件的高级策略来制作一个更复杂的表单验证。例如，我们将要验证一个表单，该表单有一个名为“message”的文本框元素，该元素的长度必须介于2和200个字符之间。另外还有一个表示“rating”的下拉列表元素，其中的值必须大于等于1且小于等于5。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Validation Plugin Demo</title>
  <script src="jquery.js"></script>
  <script src="jquery.validate.js"></script>
</head>
<body>
  <form id="myform">
    <label for="rating">评分</label>
    <select id="rating" name="rating" required>
      <option value="">请选择</option>
      <option value="1">1 分</option>
      <option value="2">2 分</option>
      <option value="3">3 分</option>
      <option value="4">4 分</option>
      <option value="5">5 分</option>
    </select>
    <br>
    <label for="message">留言</label>
    <textarea id="message" name="message" minlength="2" maxlength="200" required></textarea>
    <br>
    <button id="submit" type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $("#myform").validate({
        rules: {
          rating: {
            range: [1, 5],
          },
        },
        messages: {
          message: {
            minlength: "必须至少2个字符",
            maxlength: "不能大于200个字符",
          },
          rating: {
            range: "必须是一个介于1和5之间的整数",
          },
        },
      });
    });
  </script>
</body>
</html>

在这个示例中，我们在validate()方法中传入了一个规则对象，规则对象中有两个元素：rules和messages。

rules是一个JavaScript对象，表示表单各元素的验证规则，其中rating元素使用的是range规则。

messages也是一个JavaScript对象，包含了验证不通过时的提示信息。在这个例子中，我们设置了对message元素的最小和最大长度进行提示，对rating元素的范围进行提示。

以上就是jQuery Validation的详细讲解，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery Validation表单验证使用详解 - Python技术站