jQuery.Validate 使用笔记(jQuery Validation范例 )

下面是关于“jQuery.Validate 使用笔记(jQuery Validation范例 )”的完整攻略。

简介

jQuery.Validate是一个轻量级jQuery插件，它的作用是提供表单验证的前端逻辑，可以很方便地实现表单数据的自动验证。

安装

可以从jQuery.Validate官网https://jqueryvalidation.org/下载最新的版本。也可以通过CDN的方式来获取：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

请注意：additional-methods.min.js是一个可选的文件，它提供了一些额外的验证方法。

使用

1. 创建HTML表单

首先需要创建一个HTML表单，并添加相应的input元素，例如：

<form id="myform">
  <label for="name">Name</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email</label>
  <input type="email" id="email" name="email"><br>
  <label for="password">Password</label>
  <input type="password" id="password" name="password"><br>
  <label for="confirm_password">Confirm Password</label>
  <input type="password" id="confirm_password" name="confirm_password"><br>
  <input type="submit" value="Submit">
</form>

2. 编写jQuery.Validate代码

然后，我们需要编写验证逻辑的代码。下面示例中，我们为表单中的每个元素都添加了一个验证规则。

<script>
  $(document).ready(function () {
    $("#myform").validate({
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          minlength: 6
        },
        confirm_password: {
          required: true,
          minlength: 6,
          equalTo: "#password"
        }
      },
      messages: {
        name: "Please enter your name",
        email: {
          required: "Please enter your email",
          email: "Please enter a valid email address"
        },
        password: {
          required: "Please enter a password",
          minlength: "Your password must be at least 6 characters long"
        },
        confirm_password: {
          required: "Please enter a password",
          minlength: "Your password must be at least 6 characters long",
          equalTo: "Please enter the same password as above"
        }
      }
    });
  });
</script>

3. 提交表单并进行验证

最后，在提交表单时，我们需要调用验证逻辑来进行前端验证。如果验证通过，表单将会被正常提交。如果验证不通过，提示会自动显示。

<script>
  $(document).ready(function () {
    $("#myform").validate({
      // 在这里添加验证规则和提示信息
    });

    $("#myform").submit(function (event) {
      if ($("#myform").valid()) {
        // 表单数据通过验证，可以进行提交
        return true;
      } else {
        // 表单数据不通过验证，不进行提交
        return false;
      }
    });
  });
</script>

下面是一个完整的示例代码：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#myform").validate({
        rules: {
          name: "required",
          email: {
            required: true,
            email: true
          },
          password: {
            required: true,
            minlength: 6
          },
          confirm_password: {
            required: true,
            minlength: 6,
            equalTo: "#password"
          }
        },
        messages: {
          name: "Please enter your name",
          email: {
            required: "Please enter your email",
            email: "Please enter a valid email address"
          },
          password: {
            required: "Please enter a password",
            minlength: "Your password must be at least 6 characters long"
          },
          confirm_password: {
            required: "Please enter a password",
            minlength: "Your password must be at least 6 characters long",
            equalTo: "Please enter the same password as above"
          }
        }
      });

      $("#myform").submit(function (event) {
        if ($("#myform").valid()) {
          alert("Validation passed, form submitted!"); // 表单数据通过验证，可以进行提交
          return true;
        } else {
          alert("Validation failed, form not submitted!"); // 表单数据不通过验证，不进行提交
          return false;
        }
      });
    });
  </script>
</head>
<body>
<form id="myform">
  <label for="name">Name</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email</label>
  <input type="email" id="email" name="email"><br>
  <label for="password">Password</label>
  <input type="password" id="password" name="password"><br>
  <label for="confirm_password">Confirm Password</label>
  <input type="password" id="confirm_password" name="confirm_password"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

示例说明

示例1：自定义验证方法

一些特别的验证方法没有被jQuery.Validate自带，但是我们可以通过自定义方法来实现。下面是一个例子，验证输入的值是否为“foo”。

<script>
  $(document).ready(function () {
    $.validator.addMethod("customRule", function (value, element) {
      return this.optional(element) || /foo/.test(value);
    }, "Please enter the value \"foo\"");

    $("#myform").validate({
      rules: {
        field: {
          customRule: true
        }
      }
    });
  });
</script>

示例2：动态修改验证规则

有时候，我们需要根据表单中的其他数据动态地改变验证规则。下面的例子中，选择框的选项决定了输入框的验证规则。

<script>
  $(document).ready(function () {
    $("#interests").change(function () {
      var value = $(this).val();

      if (value === "books") {
        $("#comments").rules("add", {
          required: true,
          minlength: 50
        });
      } else {
        $("#comments").rules("remove", "required minlength");
      }
    });

    $("#myform").validate({
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        comments: {
          required: true
        }
      },
      messages: {
        name: "Please enter your name",
        email: {
          required: "Please enter your email",
          email: "Please enter a valid email address"
        },
        comments: "Please enter a message"
      }
    });
  });
</script>

在这个例子中，我们在选择框的change事件处理程序中修改了“comments”输入框的规则。如果选择的是“books”，则该输入框需要包含至少50个字符（通过minlength规则），否则如果选择了其他选项，则不需要满足该规则（通过remove方法移除该规则）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery.Validate 使用笔记(jQuery Validation范例 ) - Python技术站