简介

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

使用

1.  引入 validate.js和jquery.js文件

2.  HTML

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

3.  调用

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

相关链接

官网 ：http://validatejs.org/