jQuery表单校验插件validator使用方法详解

简介

jQuery表单校验插件validator是一款非常常用的前端插件，可以实现对表单输入内容的校验。它的优势在于简单易用、功能全面、扩展性强，尤其是支持多种语言。

安装

使用validator插件需要引入jQuery库和官方的validator插件文件。在HTML中可使用CDN和本地文件引入两种方式，如下：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入validator插件文件 -->
<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>

基本使用

1. 在HTML中定义表单元素

<form id="myform">
  <input type="text" name="username" required>
  <input type="password" name="password" minlength="6">
  <button type="submit">提交</button>
</form>

1. 使用jQuery选择器选中需要校验的表单元素，并调用validator方法

$("#myform").validate();

1. validator会自动为表单元素添加默认规则，如required必输项、minlength最小长度等。也可以使用validator提供的方法自定义校验规则

$.validator.addMethod("phone", function(value, element) {
    var tel = /^1[3456789]\d{9}$/;
    return this.optional(element) || (tel.test(value));
}, "手机号码格式错误");

以上代码定义了一个phone规则：匹配符合手机号格式的字符串，如果校验不通过则显示错误提示。

1. 在表单提交时校验

$("#myform").validate({
  submitHandler: function(form) {
    // 此处编写提交表单后的操作
  }
});

submitHandler是validator自带的一个回调函数，表示表单提交通过校验后的操作。如果表单校验不通过，则自动显示错误提示信息。

高级使用

除了以上简单的操作之外，validator还有很多高级用法，如：

• 表单元素的class属性也可以指定校验规则。例如：

<input type="email" name="email" class="required email">

表示此项必输，并校验是否符合邮箱格式。

• 多语言支持。可以在引入validator插件时指定语言文件，例如：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/localization/messages_zh.min.js"></script>

这样在校验时提示错误信息的语言就是中文。

• 表单元素的自定义错误提示信息。例如：

<input type="password" name="password" minlength="6" data-msg-minlength="密码长度不能少于6位">

表示当密码长度不足6位时，显示自定义的错误提示信息。

• 手动校验表单元素。例如：

$("#username").valid();

表示手动校验ID为username的表单元素，并返回校验结果。

示例说明

1. 简单校验示例

HTML代码：

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

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

  <label for="repassword">确认密码：</label>
  <input type="password" id="repassword" name="repassword" required>

  <button type="submit">提交</button>
</form>

JS代码：

$("#registerForm").validate({
  rules: {
    username: {
      minlength: 4
    },
    password: {
      minlength: 6
    },
    repassword: {
      equalTo: "#password"
    }
  },
  messages: {
    username: {
      minlength: "用户名长度不能少于4位"
    },
    password: {
      minlength: "密码长度不能少于6位"
    },
    repassword: {
      equalTo: "两次密码输入不一致"
    }
  },
  submitHandler: function(form) {
    alert("注册成功");
    return false;
  }
});

以上代码实现了对一个注册表单的简单校验，包括用户名必输并且长度不少于4位、密码长度不少于6位、确认密码与密码必须一致。

1. 自定义校验规则示例

HTML代码：

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

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

  <button type="submit">提交</button>
</form>

JS代码：

$.validator.addMethod("phone", function(value, element) {
  var tel = /^1[3456789]\d{9}$/;
  return this.optional(element) || (tel.test(value));
}, "手机号码格式错误");

$.validator.addMethod("emailvail", function(value, element) {
  var emailReg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
  returnthis.optional(element) || (emailReg.test(value));
}, "邮箱格式错误");

$("#loveForm").validate({
  rules: {
    phone: {
      phone: true
    },
    email: {
      emailvail: true
    }
  },
  submitHandler: function(form) {
    alert("提交成功");
    return false;
  }
});

以上代码实现了对一个“表白”页面的校验，包括手机号格式正确、邮箱格式正确。

总结

以上是jQuery表单校验插件validator的一个完整攻略，包括了基本使用、高级使用和示例说明。在实际开发中，可以根据自己的需求选择合适的校验规则和语言文件，提高开发效率，同时也能增强用户体验。