微信小程序表单必填项设置

最新推荐文章于 2024-12-19 15:38:49 发布

原创最新推荐文章于 2024-12-19 15:38:49 发布 · 1.7w 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文档介绍了如何在微信小程序中创建自定义的必填项提示，由于WeUI样式库和微信小程序的input组件不提供required属性，作者通过使用WeUI的flex布局和自定义样式实现了在每个必填字段前添加星号(*)来提示用户。通过在输入框前添加一个带有颜色的星号视图组件，并结合bind:input事件进行验证，实现了必填项的视觉提示和交互效果。

微信小程序设置表单中输入内容的必填项提示

微信小程序的WeUI样式以及微信小程序开发文档中发现并没有表单必填前的required属性
form表单
以及input组件：官方input组件文档
中都没有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">
                表单页提示，居中对齐
			</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;">专业</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>