微信小程序設(shè)置表單中輸入內(nèi)容的必填項提示

微信小程序的WeUI樣式以及微信小程序開發(fā)文檔中發(fā)現(xiàn)并沒有表單必填前的required屬性

以及input組件：

中都沒有required屬性，所以，只能自己創(chuàng)造了。

首先，利用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">聯(lián)系電話</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">
                表單頁提示，居中對齊
			</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">下一步</button>
	</view>

必填項就完成了。