WeChat applet form required setting

Prompt for mandatory items entered in the WeChat applet setting form

The WeUI style of the WeChat applet and the WeChat applet development document found that there is no required attribute before the form is required

and the input component: there is no required attribute in the official input component document
, so I can only create it myself.

Renderings:

First, using WeUI's flex layout,

the official WeUI code is as follows:
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">
                表单页提示，居中对齐
			</view>
		</view>
		<view class="weui-form__opr-area">
			<a class="weui-btn weui-btn_primary">确定</a>
		</view>

Flex layout:

<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>

After rewriting:

<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>

The required fields are complete.