<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
	<view class="weui-form">
		<view class="weui-form__text-area">
			<h2 class="weui-form__title">输入框状态</h2>
			<view class="weui-form__desc">可体验表单输入的反馈状态。显示报错信息有两种类型，一种是超过1个输入项的时候，用置顶tipsbar报错信息，告知错误原因，页面聚焦到对应的报错区域，内容标红色，另一种是在当前输入项位置报错，适用于只有1个输入项的时候，用户焦点主要是输入区域。</view>
		</view>
		<view class="weui-form__control-area">
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">表单报错：置顶tipsbar报错信息</view>
				<view class="weui-cells weui-cells_form">
					<view class="weui-cell weui-cell_active {{isWaring ? 'weui-cell_warn' : ''}}">
						<view class="weui-cell__hd"><view class="weui-label">卡号</view></view>
						<view class="weui-cell__bd weui-flex">
							<input
                                class="weui-input"
                                type="password"
                                placeholder="请输入16位数卡号"
                                placeholder-class="weui-input__placeholder"
                                value="{{value}}"
                                bindinput="onInput"
                            />
							<view wx:if="{{showClearBtn}}" aria-role="button" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="onClear">
								<i class="weui-icon-clear"></i>
							</view>
						</view>
					</view>
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd"><label class="weui-label">持卡人</label></view>
						<view class="weui-cell__bd weui-flex">
							<input
                                class="weui-input"
                                type="text"
                                placeholder="请输入持卡人姓名"
                                placeholder-class="weui-input__placeholder"
                            />
						</view>
					</view>
				</view>
			</view>
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">表单报错：当前项位置报错</view>
				<view class="weui-cells weui-cells_form">
					<view class="weui-cell weui-cell_active ">
						<view class="weui-cell__hd"><label class="weui-label">金额</label></view>
						<view class="weui-cell__bd weui-flex">
							<input
                                class="weui-input"
                                type="text"
                                placeholder="请输入金额"
                                placeholder-class="weui-input__placeholder"
                                value="{{currentValue}}"
                                bindinput="onCurrentInput"
                            />
						</view>
					</view>
				</view>
        <view class="weui-cells__tips weui-cells__tips_warn " style="{{isCurrentWaring ? 'display:block' : 'display:none'}}">错误提示</view>
			</view>
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">表单置灰</view>
				<view class="weui-cells weui-cells_form">
					<view class="weui-cell weui-cell_active weui-cell_disabled">
						<view class="weui-cell__hd">
                            <label class="weui-label">微信号</label>
                        </view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="请输入微信号" value="WeUI" disabled />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="weui-form__opr-area">
			<view aria-role="button" class="weui-btn weui-btn_primary" bindtap="onConfirm">确定</view>
		</view>
    <view class="weui-form__extra-area">
      <view class="weui-footer">
        <view class="weui-footer__text">该小程序仅演示示例，不收集个人信息。</view>
      </view>
    </view>
	</view>
  <view aria-role="alert" class="weui-toptips weui-toptips_warn {{isWaring ? 'show_toptips' : ''}}">错误提示</view>
</view>
