A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

在我们进行前端项目的时候,总是避免不了表单验证,手写呢太繁琐,不写呢,你永远不知道会是什么样的用户来使用你的网站,所以我们今天使用一款表单验证插件。 Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。
首先引入jQuery和jqvalidate
[HTML] 纯文本查看 复制代码
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
再来一些简单的html,注意看我添加的一些类名

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

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


[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;
    }
  });


怎么样,比自己手写方便很多吧。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马