建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery表单验证插件validate.js

来源:易助科技网浏览量:41收藏

简介


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


JQuery表单验证插件validate.js-示例图



使用


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/

GitHub 地址 :  https://github.com/ansman/validate.js

效果演示 :  https://validatejs.org/examples.html