jquery内置验证(validate)使用方法示例(表单验证)

下面我来详细讲解"jquery内置验证(validate)使用方法示例(表单验证)"。

1. 简介

jquery.validate是一款jquery表单验证插件，它可以实现对表单的各种验证功能，包括必填、数字验证、邮箱验证、电话验证、正则验证等。使用jquery.validate插件可以方便地对表单数据进行验证，从而提高用户体验和数据安全性。

2. 使用方法

2.1 引入jquery和jquery.validate插件

首先，在html文件中，我们需要引入jquery和jquery.validate插件的js文件。可以直接从官网下载或使用CDN链接。

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

2.2 编写HTML表单代码

接下来，我们需要编写HTML表单代码。为了简化代码，在这里我们只是演示一个简单的表单。

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email"><br>
  <label for="phone">电话：</label>
  <input type="text" id="phone" name="phone"><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  <button type="submit">提交</button>
</form>

2.3 编写jQuery代码

接下来，我们需要编写jQuery代码，对表单进行验证。在这里，我们只是简单演示几个常用的验证规则。

$(document).ready(function() {
  // 表单验证
  $("#myForm").validate({
    // 规则
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        digits: true,
        minlength: 11,
        maxlength: 11
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    // 消息
    messages: {
      name: "请输入您的姓名",
      email: {
        required: "请输入您的邮箱",
        email: "请输入正确的邮箱格式"
      },
      phone: {
        required: "请输入您的电话号码",
        digits: "请输入数字",
        minlength: "手机号不能少于11位",
        maxlength: "手机号不能多于11位"
      },
      password: {
        required: "请输入您的密码",
        minlength: "密码长度不能少于6位"
      }
    },
    // 提交响应
    submitHandler: function(form) {
      alert("提交成功");
      form.submit();
    }
  });
});

在代码中，我们使用了validate方法对表单进行验证，并设定了验证规则、错误提示消息和提交响应。其中，通过rules属性我们可以设置验证规则，比如必填、邮箱格式、电话号码格式等。messages属性可以设置对应的错误提示消息。通过submitHandler属性设置表单提交响应。

2.4 示例一

下面，我们通过一个示例来演示jquery.validate的使用方法。

需求：验证用户提交的表单数据是否正确，如果正确则提交表单，否则弹出对应的错误提示。

$(document).ready(function() {

  $("#myForm").validate({
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        digits: true,
        minlength: 11,
        maxlength: 11
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: "请输入您的姓名",
      email: {
        required: "请输入您的邮箱",
        email: "请输入正确的邮箱格式"
      },
      phone: {
        required: "请输入您的电话号码",
        digits: "请输入数字",
        minlength: "手机号不能少于11位",
        maxlength: "手机号不能多于11位"
      },
      password: {
        required: "请输入您的密码",
        minlength: "密码长度不能少于6位"
      }
    },
    submitHandler: function(form) {
      alert("提交成功");
      form.submit();
    }
  });

});

在上述示例中，我们使用了validate方法对表单进行验证，并设置了验证规则和错误提示消息。我们在表单提交时，会弹出一个提交成功的提示。

2.5 示例二

下面，我们通过另一个示例来演示jquery.validate的使用方法。

需求：验证用户提交的表单数据是否正确，如果错误则在对应的输入框下方显示错误提示。

$(document).ready(function() {

  $("#myForm").validate({
    rules: {
      name: "required",
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        digits: true,
        minlength: 11,
        maxlength: 11
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: "请输入您的姓名",
      email: {
        required: "请输入您的邮箱",
        email: "请输入正确的邮箱格式"
      },
      phone: {
        required: "请输入您的电话号码",
        digits: "请输入数字",
        minlength: "手机号不能少于11位",
        maxlength: "手机号不能多于11位"
      },
      password: {
        required: "请输入您的密码",
        minlength: "密码长度不能少于6位"
      }
    },
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });

});

在上述示例中，我们使用了validate方法对表单进行验证，并设置了验证规则和错误提示消息。通过errorPlacement属性，将对应的错误提示信息放在对应输入框下方。

3. 结语

通过上述两个示例，我们可以发现jquery内置验证(validate)的使用方法非常简单。我们只需要引入jquery和jquery.validate插件，并设置相应的验证规则和错误提示信息就行。同时，jquery内置验证还提供了很多其他的验证规则和参数供我们使用，可以根据需要进行设置。