jQuery Validate插件实现表单强大的验证功能

下面是详细讲解“jQuery Validate插件实现表单强大的验证功能”的完整攻略。

什么是jQuery Validate插件？

jQuery Validate是一款用于jQuery的表单验证插件，可以使表单验证变得更加简单和高效。通过使用jQuery Validate，您可以轻松地验证表单内容，包括必填字段、电子邮件格式、数字等。此外，它还支持定制化错误提示信息和样式，让您的表单验证看起来更加专业。下面，我们来详细讲解如何使用这个插件。

步骤一：引入jQuery和jQuery Validate库

首先，在您的网站中引入jQuery和jQuery Validate库。您可以通过CDN或本地文件引入库。下面是引入文件的代码片段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

步骤二：编写HTML表单

在这个步骤中，您需要编写HTML表单。下面是一个简单的例子：

<form id="myform">
  <label for="name">Name (required)</label>
  <input id="name" name="name" minlength="2" type="text" required>
  <br>
  <label for="email">E-Mail (required)</label>
  <input id="email" name="email" type="email" required>
  <br>
  <label for="password">Password (required)</label>
  <input id="password" name="password" minlength="5" type="password" required>
  <br>
  <label for="confirm_password">Confirm password (required)</label>
  <input id="confirm_password" name="confirm_password" minlength="5" type="password" required>
  <br>
  <input type="submit">
</form>

步骤三：编写jQuery Validate代码块

在这个步骤中，您需要编写jQuery Validate的代码块。下面是一个简单的例子：

$(document).ready(function(){
  $("#myform").validate({
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        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 your password",
        minlength: "Your password must be at least 5 characters long"
      },
      confirm_password: {
        required: "Please confirm your password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      // Add the `help-block` class to the error element
      error.addClass("help-block");

      // Add `has-feedback` class to the parent div.form-group
      // in order to add icons to inputs
      element.parents(".form-group").addClass("has-feedback");

      if (element.prop("type") === "checkbox") {
        error.insertAfter(element.parent("label"));
      } else {
        error.insertAfter(element);
      }

      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if (!element.next("span")[0]) {
        $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
      }
    },
    success: function(label, element) {
      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if (!$(element).next("span")[0]) {
        $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
      }
    },
    highlight: function(element, errorClass, validClass) {
      $(element).parents(".form-group").addClass("has-error").removeClass("has-success");
      $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".form-group").addClass("has-success").removeClass("has-error");
      $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
    }
  });
});

注意事项

在表单input中添加了"required"，规定用户必须填写数据才可提交表单
在表单中添加了一些属性规则，比如minlength等

示例一：添加更多表单验证规则

现在，我们来添加更多的表单验证规则。例如，您希望在电话输入框中仅允许输入数字。下面是添加这些规则的示例代码：

$(document).ready(function(){
  $("#myform").validate({
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      phone: {
        required: true,
        number: true
      }
    },
    messages: {
      name: "Please enter your name",
      email: {
        required: "Please enter your email",
        email: "Please enter a valid email address"
      },
      password: {
        required: "Please enter your password",
        minlength: "Your password must be at least 5 characters long"
      },
      confirm_password: {
        required: "Please confirm your password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
      },
      phone: {
        required: "Please enter your phone number",
        number: "Please enter only numbers for your phone number"
      }
    }
  });
});

示例二：修改错误提示样式

现在，让我们尝试修改错误提示样式。您可以使用“errorPlacement”和“highlight”选项来控制如何显示错误信息。下面是修改错误样式的示例代码：

$(document).ready(function(){
  $("#myform").validate({
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      phone: {
        required: true,
        number: true
      }
    },
    messages: {
      name: "Please enter your name",
      email: {
        required: "Please enter your email",
        email: "Please enter a valid email address"
      },
      password: {
        required: "Please enter your password",
        minlength: "Your password must be at least 5 characters long"
      },
      confirm_password: {
        required: "Please confirm your password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
      },
      phone: {
        required: "Please enter your phone number",
        number: "Please enter only numbers for your phone number"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      // Add the `help-block` class to the error element
      error.addClass("help-block");

      // Add `has-feedback` class to the parent div.form-group
      // in order to add icons to inputs
      element.parents(".form-group").addClass("has-feedback");

      if (element.prop("type") === "checkbox") {
        error.insertAfter(element.parent("label"));
      } else {
        error.insertAfter(element);
      }

      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if (!element.next("span")[0]) {
        $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
      }
    },
    success: function(label, element) {
      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if (!$(element).next("span")[0]) {
        $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
      }
    },
    highlight: function(element, errorClass, validClass) {
      $(element).parents(".form-group").addClass("has-error").removeClass("has-success");
      $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".form-group").addClass("has-success").removeClass("has-error");
      $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
    }
  });
});

这里只是展示了一些示例代码，您可以根据想要实现的功能自己在代码中调整。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery Validate插件实现表单强大的验证功能 - Python技术站