您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序表單必填項設置
發表時間:2020-10-19
發布人:葵宇科技
浏覽次數:329
微信小程序設置表單中(zhōng)輸入内容的必填項提示
微信小程序的WeUI樣式以及微信小程序開發文(wén)檔中(zhōng)發現并沒有表單必填前的required屬性
以及input組件:
中(zhōng)都沒有required屬性,所以,隻能自己創造了。
首先,利用WeUI的flex布局,
官方WeUI代碼是這樣的:
Form:
<view class="weui-form__control-area">
<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">
<input class="weui-input" placeholder="填寫本人微信号" placeholder-class="weui-input__placeholder" />
</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">
<input class="weui-input" placeholder="填寫本人微信号的昵稱" placeholder-class="weui-input__placeholder" />
</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">
<input class="weui-input" placeholder="填寫綁定的電話号碼" type="number" placeholder-class="weui-input__placeholder" />
</view>
</view>
</view>
</view>
</view>
<view class="weui-form__tips-area">
<view class="weui-form__tips">
表單頁提示,居中(zhōng)對齊
</view>
</view>
<view class="weui-form__opr-area">
<a class="weui-btn weui-btn_primary">确定</a>
</view>
Flex布局:
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
</view>
改寫之後:
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<view class="weui-flex">
<view class="weui-flex__item">
<view class="placeholder" style="color:red;width:5vw;">*</view>
</view>
<view class="weui-flex__item">
<view class="placeholder" style="width:20vw;">姓名</view>
</view>
</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" value="{{stu.name}}" bind:input="onName" placeholder="請輸入姓名" />
</view>
</view>
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<view class="weui-flex">
<view class="weui-flex__item">
<view class="placeholder" style="color:red;width:5vw;">*</view>
</view>
<view class="weui-flex__item">
<view class="placeholder" style="width:20vw;">專業(yè)</view>
</view>
</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" value="{{stu.profession}}" bind:input="onProfession" placeholder="請輸入專業(yè)" />
</view>
</view>
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<view class="weui-flex">
<view class="weui-flex__item">
<view class="placeholder" style="color:red;width:5vw;">*</view>
</view>
<view class="weui-flex__item">
<view class="placeholder" style="width:20vw;">班級</view>
</view>
</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" value="{{stu.class}}" bind:input="onClass" placeholder="請輸入班級" />
</view>
</view>
</view>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="showTopTips">下(xià)一步</button>
</view>
必填項就完成了。