jQuery validata插件实现方法

如何使用jQuery Validata插件来实现表单验证呢？下面是完整的攻略。

1. 下载和引入jQuery Validata插件

首先需要下载jQuery Validata插件，并在页面中引入相关的JS和CSS文件。可以通过script和link标签来分别引入相关文件，具体方法如下所示：

<!-- 引入jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入jQuery Validata插件插件 -->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<!-- 引入中文提示信息 -->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/localization/messages_zh.min.js"></script>
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.css">

2. HTML表单代码

在HTML表单中，你需要对要验证的表单元素添加一些特定的类，如 required （必填项）和 email（Email格式）。如下所示：

<form id="myform">
  <label for="name">姓名：</label>
  <input type="text" name="name" class="required">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" name="email" class="required email">
  <br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" class="required">
  <br>
  <label for="message">信息：</label>
  <textarea name="message" class="required"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

3. 编写jQuery Validata插件代码

接下来，你需要编写jQuery代码来初始化Validata插件以验证该表单。这可以通过下面的代码块来实现：

$(document).ready(function(){
  $("#myform").validate({
    rules: {
      name: "required",
      phone: {
        required: true,
        digits: true
      },
      email: {
        required: true,
        email: true
      },
      message: "required"
    },
    messages: {
      name: "请输入姓名",
      phone: {
        required: "请输入电话号码",
        digits: "请输入数字"
      },
      email: {
        required: "请输入邮箱地址",
        email: "请输入正确的邮箱地址"
      },
      message: "请输入信息内容"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});

以上代码块中的 validate() 方法可以初始化 Validata 插件。这里我们将HTML表单的 id 设置为 myform。在 rules 中，定义每个表单元素的验证规则，例如姓名（name）必填、电话（phone）必须是数值等。messages 中可以定义表单验证失败时的提示信息。最后，还可以通过 submitHandler 来设置提交表单的处理函数。

4. 示例说明

以下是两个示例，分别演示了表单验证成功和失败的情况：

示例1：验证成功

<form id="myform">
  <label for="name">姓名：</label>
  <input type="text" name="name" class="required">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" name="email" class="required email">
  <br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" class="required digits">
  <br>
  <label for="message">信息：</label>
  <textarea name="message" class="required"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

<script>
$(document).ready(function(){
  $("#myform").validate({
    rules: {
      name: "required",
      phone: {
        required: true,
        digits: true
      },
      email: {
        required: true,
        email: true
      },
      message: "required"
    },
    messages: {
      name: "请输入姓名",
      phone: {
        required: "请输入电话号码",
        digits: "请输入数字"
      },
      email: {
        required: "请输入邮箱地址",
        email: "请输入正确的邮箱地址"
      },
      message: "请输入信息内容"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>

当你完整填写了表单并点击提交，你会发现表单提交成功。

示例2：验证失败

<form id="myform">
  <label for="name">姓名：</label>
  <input type="text" name="name" class="required">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" name="email" class="required email">
  <br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" class="required digits">
  <br>
  <label for="message">信息：</label>
  <textarea name="message" class="required"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

<script>
$(document).ready(function(){
  $("#myform").validate({
    rules: {
      name: "required",
      phone: {
        required: true,
        digits: true
      },
      email: {
        required: true,
        email: true
      },
      message: "required"
    },
    messages: {
      name: "请输入姓名",
      phone: {
        required: "请输入电话号码",
        digits: "请输入数字"
      },
      email: {
        required: "请输入邮箱地址",
        email: "请输入正确的邮箱地址"
      },
      message: "请输入信息内容"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>

当你只填写了姓名和信息，但没有填写电话和邮箱，然后你尝试提交表单，你会发现表单提交失败，出现错误提示信息。

至此，你已经了解了使用jQuery Validata插件来实现表单验证的完整攻略。