表单

包含 <pure-form> 和 <pure-form-item> 两个组件。

安装依赖

表单组件依赖于 async-validator，所以需要安装它。

npm install async-validator

属性

pure-form

名称	类型	默认值	说明
model	Object	-	表单数据模型，用于绑定表单数据。
rules	Object	-	表单校验规则，用于校验表单数据。
requiredSymbol	String	*	必填符号
labelPosition	String	left	[详情] 标签位置
errorMode	String	message	[详情] 提示方式
background	String	-	表单背景
margin	String	-	表单外边距
padding	String	-	表单内边距
fontSize	String	-	表单内容文字大小
color	String	-	表单内容文字颜色
border	String	-	表单边框样式
borderWidth	String	-	表单边框宽度
borderStyle	String	-	表单边框样式
borderColor	String	-	表单边框颜色
radius	String	-	表单圆角大小
borderRadius	String	-	表单圆角大小
leftWidth	String	-	左侧整体宽度
requiredColor	String	-	必填符号颜色
requiredFontSize	String	-	必填符号字体大小
iconSize	String	-	图标大小
iconColor	String	-	图标颜色
labelFontSize	String	-	标签字体大小
labelFontWeight	String	-	标签字体粗细
labelColor	String	-	标签颜色
sublabelFontSize	String	-	副标签字体大小
sublabelFontWeight	String	-	副标签字体粗细
sublabelColor	String	-	副标签颜色
contentTextAlign	String	-	主内容文本对齐方式
arrowColor	String	-	右侧图标（箭头）颜色
arrowSize	String	-	右侧图标（箭头）大小
tipsFontSize	String	-	提示文本字体大小
tipsColor	String	-	提示文本颜色

pure-form-item

名称	类型	默认值	说明
prop	String	-	字段名称。
rule	[Object, Array]	-	字段验证规则，优先级高于 pure-form 中配置的 rules 规则。
required	Boolean	false	[详情] 是否必填。
requiredSymbol	String	*	必填符号
iconName	String	-	前置图标名称
iconMode	String	-	[参考] 前置图标图片的裁剪、缩放模式
label	String	-	标签文本
subLabel	String	-	副标签文本
labelPosition	String	left	[详情] 标签位置
arrow	Boolean	false	是否显示右侧图标（箭头）
arrowIconName	String	__you2	右侧图标（箭头）名称
arrowIconMode	String	-	[参考] 右侧图标（箭头）图片的裁剪、缩放模式
arrowRotate	Number	0	右侧图标（箭头）旋转角度
readonly	Boolean	false	是否只读，只读状态时组件内的输入框等组件无法编辑、输入、选择等操作。适合表单项是弹窗选择时，监听点击事件，弹窗选择后，将选择的值赋值给表单项。
background	String	-	表单项背景
margin	String	-	表单项外边距
padding	String	-	表单项内边距
fontSize	String	-	表单项内容文字大小
color	String	-	表单项内容文字颜色
border	String	-	表单项边框样式
borderWidth	String	-	表单项边框宽度
borderStyle	String	-	表单项边框样式
borderColor	String	-	表单项边框颜色
radius	String	-	表单项圆角大小
borderRadius	String	-	表单项圆角大小
leftWidth	String	-	左侧整体宽度
requiredColor	String	-	必填符号颜色
requiredFontSize	String	-	必填符号字体大小
iconSize	String	-	图标大小
iconColor	String	-	图标颜色
labelFontSize	String	-	标签字体大小
labelFontWeight	String	-	标签字体粗细
labelColor	String	-	标签颜色
sublabelFontSize	String	-	副标签字体大小
sublabelFontWeight	String	-	副标签字体粗细
sublabelColor	String	-	副标签颜色
contentTextAlign	String	-	主内容文本对齐方式
arrowColor	String	-	右侧图标（箭头）颜色
arrowSize	String	-	右侧图标（箭头）大小
tipsFontSize	String	-	提示文本字体大小
tipsColor	String	-	提示文本颜色

标签位置

值	说明
left	左侧
top	顶部
start	垂直靠上，等同于 align-items: flex-start;

提示方式

值	说明
message	在表单项下方显示提示
none	不提示
border	边框提示，表单项 4 个边颜色变化
border-bottom	下边框提示
toast	弹出提示

是否必填

• 通过 pure-form-item 的 required 属性可以设置是否必填，此方式只显示必填符号，验证时不会验证必填规则。
• 通过在 pure-form 的 rules 中设置 required 为 true 可以设置是否必填。
• 通过在 pure-form-item 的 rule 中设置 required 为 true 可以设置是否必填。

vue

<template>
	<pure-form :model="form">
		<!-- 通过 required 属性设置字段必填，此方式只显示必填符号，验证时不会验证必填规则 -->
		<pure-form-item label="姓名" prop="name" required>
			<input v-model="form.name" />
		</pure-form-item>
	</pure-form>

	<!-- 通过 rules 设置必填 -->
	<pure-form :model="form" :rules="rules">
		<!-- 通过 required 属性设置字段必填，此方式只显示必填符号，验证时不会验证必填规则 -->
		<pure-form-item label="姓名" prop="name">
			<input v-model="form.name" />
		</pure-form-item>
	</pure-form>

	<pure-form :model="form">
		<!-- 通过 rule 设置必填 -->
		<pure-form-item label="姓名" prop="name" :rule="nameRule">
			<input v-model="form.name" />
		</pure-form-item>
	</pure-form>
</template>

js

import { ref } from "vue";

// 表单数据
const form = ref({
	name: "",
});

// 表单验证规则
const rules = ref({
	name: {
		required: true,
		message: "请输入姓名",
	},
});

// name 字段验证规则
const nameRule = ref({
	required: true,
	message: "请输入姓名",
});

事件

pure-form-item

名称	参数	说明
@onClick	-	点击时触发

方法

pure-form

方法名	参数	说明
validate()	-	[详情] 验证表单
validateField()	fieldName	[详情] 验证单个字段
validateFields()	fieldNames	[详情] 验证多个字段
reset()	-	[详情] 重置表单

验证表单

vue

<template>
	<pure-form :model="form" :rules="rules" ref="formRef">
		<pure-form-item label="姓名" prop="name">
			<pure-input
				v-model="form.name"
				placeholder="请输入姓名"
			></pure-input>
		</pure-form-item>
		<pure-form-item label="年龄" prop="age">
			<pure-input
				v-model="form.age"
				placeholder="请输入年龄"
			></pure-input>
		</pure-form-item>
	</pure-form>
	<pure-button
		text="提交"
		theme="primary"
		block
		shape="round"
		@onClick="handleSubmit"
	></pure-button>
</template>

js

import { ref } from "vue";

// 表单数据
const form = ref({
	name: "",
	age: "",
});

// 表单校验规则
const rules = ref({
	name: [{ required: true, message: "请输入姓名" }],
	age: [{ required: true, message: "请输入年龄" }],
});

// 表单Ref
const formRef = ref(null);

// 提交
function handleSubmit() {
	formRef.value
		.validate()
		.then(() => {
			// 校验通过
			uni.showToast({
				title: "校验通过",
				icon: "success",
			});
		})
		.catch(() => {
			// 校验不通过
			uni.showToast({
				title: "校验不通过",
				icon: "error",
			});
		});
}

验证字段

vue

<template>
	<pure-form :model="form" :rules="rules" ref="formRef">
		<pure-form-item label="姓名" prop="name">
			<pure-input
				v-model="form.name"
				placeholder="请输入姓名"
			></pure-input>
		</pure-form-item>
		<pure-form-item label="年龄" prop="age">
			<pure-input
				v-model="form.age"
				placeholder="请输入年龄"
			></pure-input>
		</pure-form-item>
	</pure-form>
	<pure-button
		text="验证单个字段"
		theme="primary"
		block
		shape="round"
		@onClick="handleValidateField"
	></pure-button>
	<pure-button
		text="验证多个字段"
		theme="primary"
		block
		shape="round"
		@onClick="handleValidateFields"
	></pure-button>
</template>

js

import { ref } from "vue";

// 表单数据
const form = ref({
	name: "",
	age: "",
});

// 表单校验规则
const rules = ref({
	name: [{ required: true, message: "请输入姓名" }],
	age: [{ required: true, message: "请输入年龄" }],
});

// 表单Ref
const formRef = ref(null);

// 验证单个字段
function handleValidateField() {
	formRef.value
		.validateField("name")
		.then(() => {
			// 校验通过
			uni.showToast({
				title: "校验通过",
				icon: "success",
			});
		})
		.catch(() => {
			// 校验不通过
			uni.showToast({
				title: "校验不通过",
				icon: "error",
			});
		});
}

// 验证多个字段
function handleValidateFields() {
	formRef.value
		.validateFields(["name", "age"])
		.then(() => {
			// 校验通过
			uni.showToast({
				title: "校验通过",
				icon: "success",
			});
		})
		.catch(() => {
			// 校验不通过
			uni.showToast({
				title: "校验不通过",
				icon: "error",
			});
		});
}

重置表单

pure-form 组件提供了 reset 方法用于重置表单数据。
但是，重置的实现只是简单的将表单字段的值设置为 null，如有需特殊处理的字段，建议自行实现重置功能。

vue

<template>
	<pure-form :model="form" :rules="rules" ref="formRef">
		<pure-form-item label="姓名" prop="name">
			<pure-input
				v-model="form.name"
				placeholder="请输入姓名"
			></pure-input>
		</pure-form-item>
		<pure-form-item label="年龄" prop="age">
			<pure-input
				v-model="form.age"
				placeholder="请输入年龄"
			></pure-input>
		</pure-form-item>
	</pure-form>
	<pure-button
		text="重置"
		theme="warning"
		block
		shape="round"
		@onClick="handleReset"
	></pure-button>
</template>

js

import { ref } from "vue";

// 表单数据
const form = ref({
	name: "",
	age: "",
});

// 表单校验规则
const rules = ref({
	name: [{ required: true, message: "请输入姓名" }],
	age: [{ required: true, message: "请输入年龄" }],
});

// 表单Ref
const formRef = ref(null);

// 重置
function handleReset() {
	formRef.value.reset();
}

插槽

pure-form

名称	参数	说明
#default	-	默认

pure-form-item

名称	参数	说明
#left	-	左侧内容
#icon	-	左侧图标
#label	-	标签
#required	-	必填符号
#default	-	默认，表单项内容
#right	-	右侧内容
#arrow	-	右侧图标（箭头）