微信小程序設置表單中輸入内容的(de)必填項提示

微信小程序的(de)WeUI樣式以(yǐ)及微信小程序開發文檔中發現并沒有表單必填前的(de)required屬性

以(yǐ)及input組件：

中都沒有required屬性，所以(yǐ)，隻能自己創造了(le／liǎo)。

首先，利用WeUI的(de)flex布局，

官方WeUI代碼是(shì)這(zhè)樣的(de)：
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="填寫本人(rén)微信号" 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="填寫本人(rén)微信号的(de)昵稱" 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="填寫綁定的(de)電話号碼" 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>

改寫之(zhī)後：

<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;">專業</view>
					</view>
				</view>
			</view>
			<view class="weui-cell__bd">
				<input class="weui-input" value="{{stu.profession}}" bind:input="onProfession" 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;">班級</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>

必填項就(jiù)完成了(le／liǎo)。