jQuery验证插件validate.js

最新推荐文章于 2024-08-12 08:44:04 发布

阳光下的冷静

最新推荐文章于 2024-08-12 08:44:04 发布

阅读量1w

点赞数 6

分类专栏： jQuery jQuery插件使用文章标签： jQuery表单验证插件 validate.js Validate.js使用 jQuery表单验证插件资源下载

本文链接：https://blog.csdn.net/m0_37686205/article/details/88822234

版权

jQuery 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

jQuery插件使用

9 篇文章 0 订阅

订阅专栏

`validate.js`介绍

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea`的验证。

`validate.js`兼容性

jQuery兼容：兼容jQuery1.7以上的版本
浏览器兼容：兼容IE7 以上，Chrome，Firefox，Opera，Safari，Mobile Browser

`validate.js`使用

首先是组要载入相关的资源文件，主要是jquery.js 和 validate.js，如下代码：

    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jquery-validate.js"></script>

然后是是Dom标签验证规则的填写，代码如下：

<div class="form_control">
  <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
  <select class="required" data-valid="isNonEmpty" data-error="省份必填">
    <option value="">请选择省份</option>
    <option value="001">001</option>
    <option value="002">002</option>
  </select>
</div>

针对上述的代码，有几点解释，如下：

给需要验证的表单元素的class填入required（不建议在这个class上做其他样式）。
建议input用独立div包裹，因为验证的message是从当前input的父元素上append生成。
data-tip：在尚未验证而获取焦点时出现的提示。
data-valid：验证规则，若有组合验证，以||符号分割。
data-error：验证错误提示，对应data-valid，以||符号分割。
单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。

<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
      <label><input type="radio" name="sex">男</label>
      <label><input type="radio" name="sex">女</label>
      <label><input type="radio" name="sex">未知</label>
  </span>
</div>
<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
      <label><input type="checkbox" name="label">红</label>
      <label><input type="checkbox" name="label">绿</label>
      <label><input type="checkbox" name="label">蓝</label>
  </span>
</div>

最后还有JavaScript调用相关方法等，代码如下：

//**注意：必须以表单元素调用validate**
  $('form').validate({
    type:{
      isChecked: function(value, errorMsg, el) {
        var i = 0;
        var $collection = $(el).find('input:checked');
        if (!$collection.length) {
          return errorMsg;
        }
      }
    },
    onFocus: function() {
      this.parent().addClass('active');
      return false;
    },
    onBlur: function() {
      var $parent = this.parent();
      var _status = parseInt(this.attr('data-status'));
      $parent.removeClass('active');
      if (!_status) {
        $parent.addClass('error');
      }
      return false;
    }
  });

Validate.js相关方法列表如下：

方法	语法	类型	说明
onFocus	arguments => event	Function	获取焦点时的callback
onBlur	arguments => event	Function	失去焦点时的callback
onChange	arguments => event	Function	触发change的callback
type	自定义验证规则，参数顺序：value,errorMsg,el

表单提交前的验证，代码如下：

  $('form').on('submit', function(event) {
    event.preventDefault();
    $(this).validate('submitValidate'); //return true or false;
  });

`validate.js`完整使用实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            font: 14px/1.2 "微软雅黑";
        }
        div {
            width: 300px;
            position: relative;
            margin: 20px 0;
            padding: 5px 10px;
        }
        .form_control {
            border: 1px #ccc solid;
        }
        input[type="text"],
        input[type="password"] {
            border: none;
            width: 100%;
        }
        .form_control.active {
            border: 1px #32BC61 solid;
            background-color: #fff;
        }
        .form_control.error {
            border: 1px #f00 solid;
            background-color: #FBF9BB;
        }

        .form_control.error input[type="text"],
        .form_control.error input[type="password"] {
            background-color: #FBF9BB;
            color: #f00;
        }
        input[type="text"]:focus,
        input[type="password"]:focus {
            border: none;
            outline: none;
        }
        .form_control .valid_message {
            color: #32BC61;
            position: absolute;
            left: 325px;
            top: 5px;
            width: 200px;
        }
        .form_control.error .valid_message {
            color: #f00;
        }
        .form_control.success .valid_message {
            background: url(sucess.png) no-repeat;
            left: auto;
            right: 5px;
            top: 4px;
            width: 16px;
            height: 16px;
        }
        .none {
            display: none;
        }
    </style>
</head>

<body>
<form>
    <div class="form_control">
        <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱"
               data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
    </div>
    <div class="form_control">
        <input class="required" value="123456789" type="password" data-tip="请输入您的密码"
               data-valid="isNonEmpty||between:6-16" data-error="密码不能为空||密码长度6-16位" name="nickname">
    </div>
    <div class="form_control">
        <input class="required" value="王大锤" type="text" name="email" data-tip="请输入您的姓名"
               data-valid="isNonEmpty||onlyZh||between:2-5" data-error="姓名不能为空||姓名只能为中文||姓名长度为2-5位">
    </div>
    <div class="form_control">
      <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
          <label><input type="radio" name="sex">男</label>
          <label><input type="radio" name="sex">女</label>
          <label><input type="radio" name="sex">未知</label>
      </span>
    </div>
    <div class="form_control">
      <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
          <label><input type="checkbox" name="label">红</label>
          <label><input type="checkbox" name="label">绿</label>
          <label><input type="checkbox" name="label">蓝</label>
      </span>
    </div>
    <div class="form_control">
        <select class="required" data-valid="isNonEmpty" data-error="省份必填">
            <option value="">请选择省份</option>
            <option value="001">001</option>
            <option value="002">002</option>
            <option value="003">003</option>
            <option value="004">004</option>
            <option value="005">005</option>
            <option value="006">006</option>
            <option value="007">007</option>
            <option value="008">008</option>
            <option value="009">009</option>
            <option value="010">010</option>
        </select>
    </div>
    <div>
        <input type="submit" value="提交">
    </div>
</form>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
<script type="text/javascript">
    $('form').validate({
        onFocus: function () {
            this.parent().addClass('active');
            return false;
        },
        onBlur: function () {
            var $parent = this.parent();
            var _status = parseInt(this.attr('data-status'));
            $parent.removeClass('active');
            if (!_status) {
                $parent.addClass('error');
            }
            return false;
        }
    });
    $('form').on('submit', function (event) {
        event.preventDefault();
        $(this).validate('submitValidate'); //return boolean;
    });
</script>
</body>
</html>