weui/src/example/form/form_input_status.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
  <div class="weui-form">
    <div class="weui-form__bd">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">输入框状态</h2>
        <div class="weui-form__desc">可体验表单输入的反馈状态。显示报错信息有两种类型，一种是超过1个输入项的时候，用置顶tipsbar报错信息，告知错误原因，页面聚焦到对应的报错区域，内容标红色，另一种是在当前输入项位置报错，适用于只有1个输入项的时候，用户焦点主要是输入区域。</div>
      </div>
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells__title">表单报错：置顶tipsbar报错信息</div>
          <div class="weui-cells">
            <label for="js_input1" class="weui-cell weui-cell_active" id="js_cell">
              <div class="weui-cell__hd"><span class="weui-label">卡号</span></div>
              <div class="weui-cell__bd weui-flex">
                  <input id="js_input1" class="weui-input" type="text" pattern="[0-9]*" placeholder="请输入16位数卡号" maxlength="16" />
                  <button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
                    <i class="weui-icon-clear"></i>
                  </button>
              </div>
            </label>
            <label for="js_input2" class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><span class="weui-label">持卡人</span></div>
              <div class="weui-cell__bd weui-flex">
                  <input id="js_input2" class="weui-input" type="text" placeholder="请输入持卡人姓名" />
              </div>
            </label>
          </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells__title">表单报错：当前项位置报错</div>
          <div class="weui-cells">
            <label for="js_current_input" class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><span class="weui-label">金额</span></div>
              <div class="weui-cell__bd weui-flex">
                  <input id="js_current_input" class="weui-input" type="text" placeholder="请输入金额" />
              </div>
            </label>
          </div>
          <div role="alert" id="js_current_tips" style="display: none;" class="weui-cells__tips weui-cells__tips_warn">最多支持8位数</div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells__title">表单只读、置灰</div>
          <div class="weui-cells">
            <label for="js_input3" class="weui-cell weui-cell_active weui-cell_readonly">
              <div class="weui-cell__hd"><span class="weui-label">EMail</span></div>
              <div class="weui-cell__bd">
                  <input id="js_input3" class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
              </div>
            </label>
            <label for="js_input4" class="weui-cell weui-cell_active weui-cell_disabled">
              <div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
              <div class="weui-cell__bd">
                  <input id="js_input4" class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-form__ft">
      <div class="weui-form__opr-area">
        <a role="button" aria-disabled="true" disabled class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
      </div>
    </div>
  </div>
  <div role="alert" id="js_toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
          <p class="weui-toast__content">已完成</p>
      </div>
  </div>
</div>

<script type="text/javascript">
    $(function(){
      var $tooltips = $('.js_tooltips');
      var $toast = $('#js_toast');
      var $input = $('#js_input1');
      var $inputClear = $('#js_input_clear');
      var $cell = $('#js_cell');
      var $currentInput = $('#js_current_input');

      $input.on('input', function(){
        var $value = $input.val();
        if ($cell.hasClass('weui-cell_warn')){
          $cell.removeClass('weui-cell_warn');
        }
        if ($value){
          $('#showTooltips').removeClass('weui-btn_disabled');
          $('#showTooltips').removeAttr('disabled');
          $('#showTooltips').attr('aria-disabled','false');
        }else{
          $('#showTooltips').addClass('weui-btn_disabled');
          $('#showTooltips').addAttr('disabled');
          $('#showTooltips').attr('aria-disabled','true');
        }
      });
      $currentInput.on('input', function(){
        var $value = $currentInput.val();
        if ($value){
          $('#js_current_tips').css('display','block');
        }else{
          $('#js_current_tips').css('display','none');
        }
      });
      $('#showTooltips').on('click', function(){
          if ($(this).hasClass('weui-btn_disabled')) return;

          var $value = $input.val();
          if ($tooltips.css('display') != 'none') return;

          // toptips的fixed, 如果有`animation`, `position: fixed`不生效
          $('.page.cell').removeClass('slideIn');

          if($value.length < 16){
            $cell.addClass('weui-cell_warn');
            $tooltips.fadeIn(100);
            setTimeout(function () {
              $tooltips.fadeOut(100);
            }, 2000);
          }else{
            $toast.fadeIn(100);
            $toast.attr('aria-live','assertive');
            setTimeout(function () {
              $toast.fadeOut(100);
              $toast.attr('aria-live','off');
            }, 2000);
          }
      });
      $inputClear.on('click', function(){
        $input.val('');
      });
    });
</script>