JQuery扩展插件Validate 3通过参数设置错误信息

JQuery扩展插件Validate 3是一款非常流行的前端表单校验插件，它可以通过一些参数设置自定义的错误提示信息。在本文中，我将为大家详细讲解这个过程。

1. 设置错误提示信息

JQuery扩展插件Validate 3默认的错误提示信息可能并不太适合我们的实际需求，所以我们需要通过一些设置来自定义错误提示信息。其中，errorClass和errorPlacement是比较常用且比较重要的两个参数。

1.1 errorClass

errorClass参数用于设置错误提示信息的CSS类名，我们可以用它来定制错误提示信息的样式。

$("#myform").validate({
  errorClass: "my-error",
  rules: {
    email: {
      required: true,
      email: true
    },
    password: {
      required: true,
      minlength: 6
    }
  }
});

上述代码中，我们将errorClass设置为my-error，这样在表单校验失败时，JQuery会自动给对应的表单元素添加my-error类名，从而使得我们可以通过CSS来控制错误提示信息的样式。

1.2 errorPlacement

errorPlacement参数用于设置错误提示信息的位置，默认情况下，错误提示信息会显示在校验失败的表单元素的右侧。但是，我们可以通过errorPlacement参数来自定义错误提示信息的位置。

$("#myform").validate({
  errorPlacement: function(error, element) {
    error.appendTo("#error-message");
  },
  rules: {
    email: {
      required: true,
      email: true
    },
    password: {
      required: true,
      minlength: 6
    }
  }
});

上述代码中，我们将errorPlacement设置为一个函数，这个函数的作用是将校验失败的错误提示信息放置到页面中一个id为error-message的元素中。

2. 示例说明

接下来，我们通过两个示例来说明如何通过参数设置错误提示信息。

2.1 示例一

对于一个登录表单，我们需要校验用户名和密码是否为空。如果校验失败，我们希望在表单的下方显示错误提示信息，并且将错误提示信息的字体颜色设置成红色。

<form id="login-form">
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username" />

  <label for="password">密码：</label>
  <input type="password" name="password" id="password" />

  <button type="submit">登录</button>
</form>

<div id="login-error"></div>

$("#login-form").validate({
  errorClass: "login-error",
  errorPlacement: function(error, element) {
    error.appendTo("#login-error");
  },
  rules: {
    username: {
      required: true
    },
    password: {
      required: true
    }
  },
  messages: {
    username: {
      required: "用户名不能为空"
    },
    password: {
      required: "密码不能为空"
    }
  },
  highlight: function(element) {
    $(element).addClass("error");
  },
  unhighlight: function(element) {
    $(element).removeClass("error");
  }
});

.login-error {
  color: red;
}

在上述代码中，我们将errorClass设置为login-error，将errorPlacement设置为一个函数，将校验失败的错误提示信息放置在id为login-error的元素中。同时，我们还通过messages参数为每个表单元素设置了自定义的错误信息。最后，我们通过highlight和unhighlight参数自定义了校验失败时表单元素的样式。

2.2 示例二

对于一个用户注册表单，我们需要校验用户名、密码、邮箱和手机号是否符合要求。如果校验失败，我们希望在对应的表单元素的下方显示错误提示信息，并且将错误提示信息的字体颜色设置成红色。

<form id="register-form">
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username" />

  <label for="password">密码：</label>
  <input type="password" name="password" id="password" />

  <label for="email">邮箱：</label>
  <input type="email" name="email" id="email" />

  <label for="phone">手机号：</label>
  <input type="text" name="phone" id="phone" />

  <button type="submit">注册</button>
</form>

<div id="username-error"></div>
<div id="password-error"></div>
<div id="email-error"></div>
<div id="phone-error"></div>

$("#register-form").validate({
  rules: {
    username: {
      required: true,
      minlength: 3,
      remote: "/check-username"
    },
    password: {
      required: true,
      minlength: 6
    },
    email: {
      required: true,
      email: true,
      remote: "/check-email"
    },
    phone: {
      required: true,
      minlength: 11,
      remote: "/check-phone"
    }
  },
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: jQuery.validator.format("用户名长度不能少于{0}个字符"),
      remote: "用户名已存在"
    },
    password: {
      required: "密码不能为空",
      minlength: jQuery.validator.format("密码长度不能少于{0}个字符")
    },
    email: {
      required: "邮箱不能为空",
      email: "邮箱格式不正确",
      remote: "邮箱已被注册"
    },
    phone: {
      required: "手机号不能为空",
      minlength: jQuery.validator.format("手机号长度不能少于{0}个字符"),
      remote: "手机号已被注册"
    }
  },
  errorPlacement: function(error, element) {
    var id = $(element).attr("id") + "-error";
    error.appendTo("#" + id);
  },
  highlight: function(element) {
    $(element).addClass("error");
  },
  unhighlight: function(element) {
    $(element).removeClass("error");
  }
});

.error {
  color: red;
}

在上述代码中，我们通过rules参数设置了每个表单元素需要遵守的规则，并通过messages参数为每个表单元素设置了自定义的错误信息。同时，我们还将errorPlacement设置为一个函数，将校验失败的错误提示信息放置在对应表单元素的下方。最后，我们通过highlight和unhighlight参数自定义了校验失败时表单元素的样式。