jQuery插件Validate实现自定义校验结果样式

jQuery插件Validate是一款优秀的表单验证插件，广泛应用于Web前端开发领域。本文将详细讲解如何通过自定义校验结果样式，让Web表单更具有美感和可定制性。

1. 安装jQuery插件Validate

首先，需要在项目中引入jQuery和jQuery插件Validate。可以将它们从CDN上引入，也可以下载到本地后引入：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery插件Validate自定义样式示例</title>
  <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.3/jquery.validate.min.js"></script>
  <!-- 或者下载到本地后引入 -->
  <!-- <script src="jquery.min.js"></script> -->
  <!-- <script src="jquery.validate.min.js"></script> -->
</head>
<body>
<!-- 表单内容 -->
</body>
</html>

2. 自定义校验结果样式

默认情况下，jQuery插件Validate会以红色字体的形式在表单输入框下方提示错误信息。如果需要自定义校验结果样式，可以通过下面的方式进行。

首先，在HTML代码中为表单元素设置一个class，再在CSS中定义该class的样式。例如，对于一个名为“username”的表单输入框，可以这样定义：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery插件Validate自定义样式示例</title>
  <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.3/jquery.validate.min.js"></script>
  <style>
    .error {
      border-color: #f00;
      color: #f00;
    }
  </style>
</head>
<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" name="username" class="validate">
    <br>
    <label for="password">密码：</label>
    <input type="password" name="password" class="validate">
    <br>
    <button type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $('form').validate({
        rules: {
          username: 'required',
          password: 'required'
        },
        messages: {
          username: '请填写用户名',
          password: '请填写密码'
        }
      });
    });
  </script>
</body>
</html>

其中，.error 是jQuery插件Validate用于提示错误信息的class，我们在CSS中对其进行样式定义，例如改变其边框颜色以及字体颜色。

在表单验证失败时，jQuery插件Validate会在相应的表单输入框上添加.error类。因此，我们可以通过这个class的定义来改变校验结果的样式。

另外，还可以通过设置errorElement和errorClass属性来改变错误提示信息的元素和class。例如：

$('form').validate({
  errorElement: 'span',
  errorClass: 'errorMsg',
  rules: {
    // ...
  },
  messages: {
    // ...
  }
});

这样，校验失败后的提示信息不再是默认的

元素，而是元素，并且其class为errorMsg。我们可以通过CSS对其进行样式定义。

3. 自定义校验结果内容

除了样式之外，有时候还需要自定义校验结果的内容。jQuery插件Validate提供了一个showErrors回调函数，可以通过它来自定义错误提示信息的显示方式。例如：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery插件Validate自定义样式和内容示例</title>
  <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.3/jquery.validate.min.js"></script>
  <style>
    .error {
      border-color: #f00;
      color: #f00;
    }
    .errorMsg {
      color: #f00;
    }
  </style>
</head>
<body>
  <form>
    <label for="email">邮箱：</label>
    <input type="email" name="email" class="validate">
    <br>
    <button type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $('form').validate({
        errorElement: 'span',
        errorClass: 'errorMsg',
        rules: {
          email: {
            required: true,
            email: true
          }
        },
        messages: {
          email: {
            required: '请填写邮箱',
            email: '邮箱格式不正确'
          }
        },
        showErrors: function(errorMap, errorList) {
          // 首先清空所有提示信息
          this.defaultShowErrors();

          // 遍历错误列表，为每个错误添加自定义内容
          $.each(errorList, function(index, error) {
            var input = $(error.element);
            var label = $('label[for="' + input.attr('name') + '"]');
            var message = input.attr('placeholder') + '填写有误';
            label.after('<span class="errorMsg">' + message + '</span>');
          });
        }
      });
    });
  </script>
</body>
</html>

在这个例子中，我们添加了一个邮箱输入框，并为其添加了email规则。当校验失败时，showErrors函数会被调用。我们首先调用this.defaultShowErrors()，清空所有错误提示信息，然后根据错误列表遍历，为每个错误添加自定义内容。

假设，给出的邮箱输入框的placeholder为“请输入邮箱地址”，则错误提示信息的格式为“请输入邮箱地址填写有误”。

4. 示例说明

为了更好的理解jQuery插件Validate的自定义样式和内容，这里给出两个示例进行说明。

示例一：添加复选框的校验

有时候，我们需要对复选框进行必选校验。这需要我们来自定义Validate的校验规则和错误提示信息。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>自定义校验复选框示例</title>
  <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.3/jquery.validate.min.js"></script>
  <style>
    /* 自定义样式 */
    .error {
      border-color: #f00;
      color: #f00;
    }
    .errorMsg {
      color: #f00;
    }
  </style>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" class="validate-checkbox" name="checkbox1" value="1">选项1
    </label>
    <br>
    <label>
      <input type="checkbox" class="validate-checkbox" name="checkbox2" value="2">选项2
    </label>
    <br>
    <button type="submit">提交</button>
  </form>
  <script>
    /* 自定义校验规则和错误提示信息 */
    $.validator.addMethod('mustCheck', function(value, element, params) {
      var name = $(element).attr('name');
      var group = $(params).find('[name="' + name + '"]');
      return group.filter(':checked').length > 0;
    }, '请至少选中一项');

    $(function() {
      $('form').validate({
        errorElement: 'span', // 错误提示信息元素
        errorClass: 'errorMsg', // 错误提示信息class
        ignore: [], // 不忽略任何元素
        rules: {
          checkbox1: {
            mustCheck: '.validate-checkbox'
          },
          checkbox2: {
            mustCheck: '.validate-checkbox'
          }
        },
        messages: {
          checkbox1: {
            mustCheck: '请至少选中一项'
          },
          checkbox2: {
            mustCheck: '请至少选中一项'
          }
        }
      });
    });
  </script>
</body>
</html>

在该例子中，我们需要对复选框进行必选校验。首先，我们在HTML中为每个复选框添加了一个class“validate-checkbox”，在校验规则中通过参数params来指定该class。然后，我们在校验规则中添加一个名为“mustCheck”的校验方法，用来判断在该class下至少有一个复选框被选中。最后，在rules和messages中分别指定校验规则和校验失败时的错误提示信息。

示例二：自定义校验结果样式

通常情况下，我们希望通过CSS对校验结果进行自定义样式，以适应我们Web应用的UI设计。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>自定义校验结果样式示例</title>
  <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.3/jquery.validate.min.js"></script>
  <style>
    /* 自定义样式 */
    .error {
      border-color: #f00;
      color: #f00;
    }
    #username + .result {
      padding-left: 20px;
      font-size: 12px;
      font-weight: normal;
    }
    #email + .result {
      padding-left: 20px;
      font-size: 12px;
      font-weight: normal;
    }
    #password + .result {
      padding-left: 20px;
      font-size: 12px;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" class="validate">
    <span class="result"></span>
    <br>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" class="validate">
    <span class="result"></span>
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" class="validate">
    <span class="result"></span>
    <br>
    <button type="submit">提交</button>
  </form>
  <script>
    $(function() {
      $('form').validate({
        errorElement: 'span', // 错误提示信息元素
        errorClass: 'errorMsg', // 错误提示信息class
        rules: {
          username: {
            required: true,
            maxlength: 8
          },
          email: {
            required: true,
            email: true
          },
          password: {
            required: true,
            minlength: 6
          }
        },
        messages: {
          username: {
            required: '请填写用户名',
            maxlength: '用户名不能超过8位'
          },
          email: {
            required: '请填写邮箱',
            email: '邮箱格式不正确'
          },
          password: {
            required: '请填写密码',
            minlength: '密码不能少于6位'
          }
        },
        success: function(label, element) {
          // 隐藏默认的校验结果提示信息
          label.hide();

          // 显示自定义的校验结果提示信息
          $(element).next('.result').html('√');
        },
        highlight: function(element, errorClass, validClass) {
          // 添加自定义的errorClass，移除validClass
          $(element).removeClass(validClass).addClass(errorClass)
            .next('.result').html('×');
        },
        unhighlight: function(element, errorClass, validClass) {
          // 添加自定义的validClass，移除errorClass
          $(element).removeClass(errorClass).addClass(validClass)
            .next('.result').html('√');
        }
      });
    });
  </script>
</body>
</html>

在该例子中，我们重新定义了错误提示信息的class“errorMsg”，并且在CSS中加入了更具有美感和可定制性的样式定义。在校验成功时，我们通过自定义的回调函数success为校验结果添加了“√”标志，而在校验失败时则添加了“×”标志。此外，通过highlight和unhighlight函数，我们不仅可以改变错误的样式，还可以为正确的表单元素添加自定义样式，以增强用户体验。