【广州前端】jQuery-validate验证插件快速上手 - 黑马程序员技术交流社区

在我们进行前端项目的时候，总是避免不了表单验证，手写呢太繁琐，不写呢，你永远不知道会是什么样的用户来使用你的网站，所以我们今天使用一款表单验证插件。 Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

[HTML] 纯文本查看 复制代码

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

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

[HTML] 纯文本查看 复制代码

<div class="form_control">

  <input class="required" value="nijian@itcast.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>

<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;

    }

  });