PureUi 官方中文文档
搜索 K

深色模式

表单 Form ​

表单组件。

提示

表单验证使用的是 async-validator，使用 pure-form 前需安装相关依赖包 npm i async-validator， async-validator 使用方式请参考官方文档。

重要提示 ​

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性 ​

  • 兼容：✅
  • 不兼容：❌
  • 未知：❔
H5安卓苹果微信支付宝百度抖音QQ快手飞书京东
✅✅✅✅✅✅✅✅✅✅✅
小红书鸿蒙360华为快应用快应用联盟
✅❔❔❔❔

插件市场地址 ​

DCloud 插件市场地址

基础使用 ​

  • 通过 form 属性设置表单数据。
  • 通过 rules 属性设置表单验证规则。
  • 通过 defaultForm 属性设置表单重置时的默认值，默认取 form 数据的初始化值。
vue
<template>
    <pure-form :form="form" :rules="rules" ref="formRef" class=" pure-field-text-align-right">
        <!-- 姓名 - 字符串类型 -->
        <pure-field prop="name" label="姓名" class="pure-field-border-bottom">
            <pure-input v-model="form.name" placeholder="请输入姓名"></pure-input>
        </pure-field>

        <!-- 年龄 - 数字类型 -->
        <pure-field prop="age" label="年龄" class="pure-field-border-bottom">
            <pure-input v-model="form.age" placeholder="请输入年龄" type="number"></pure-input>
        </pure-field>

        <!-- 性别 - 单选类型 -->
        <pure-field prop="gender" label="性别" class="pure-field-border-bottom">
            <pure-radio-group v-model="form.gender" class="pure-radio-items-end">
                <pure-radio label="男" value="1"></pure-radio>
                <pure-radio label="女" value="0"></pure-radio>
            </pure-radio-group>
        </pure-field>

        <!-- 邮箱 - 邮箱类型 -->
        <pure-field prop="email" label="邮箱" class="pure-field-border-bottom">
            <pure-input v-model="form.email" placeholder="请输入邮箱"></pure-input>
        </pure-field>

        <!-- 手机号 - 自定义验证函数 -->
        <pure-field prop="phone" label="手机号" class="pure-field-border-bottom">
            <pure-input v-model="form.phone" placeholder="请输入手机号" type="tel"></pure-input>
        </pure-field>

        <!-- 地址 - 弹窗类型 -->
        <pure-field prop="address" label="地址" readonly rightIcon="__you2" @onClick="handleAddressFieldClick"
            class="pure-field-border-bottom">
            <pure-input v-model="form.address" placeholder="请输入地址"></pure-input>
        </pure-field>

        <!-- 爱好 - 多选类型 -->
        <pure-field prop="hobby" label="爱好" rightIcon="__you2" class="pure-field-border-bottom">
            <pure-checkbox-group v-model="form.hobby" class="pure-checkbox-items-end">
                <pure-checkbox v-for="cbx in hobbiesOptions" :key="cbx.label" :value="cbx.value"
                    :label="cbx.label"></pure-checkbox>
            </pure-checkbox-group>
        </pure-field>

        <!-- 生日 - 日期类型 -->
        <pure-field prop="display" label="生日" readonly rightIcon="__you2" class="pure-field-border-bottom"
            @onClick="handleBirthdayFieldClick">
            <pure-input v-model="form.birthday" placeholder="请选择生日"></pure-input>
        </pure-field>

        <!-- 展示资料 - 布尔类型 -->
        <pure-field prop="display" label="展示资料">
            <pure-switch v-model="form.display"></pure-switch>
        </pure-field>
    </pure-form>
</template>

<script setup>
import { ref } from "vue";

// 表单数据
const form = ref({
	name: "",
	age: null,
	gender: "",
	email: "",
	phone: "",
	address: "",
	hobby: [],
	display: false,
	birthday: "",
});

// 表单规则
// 规则中可以添加 `trigger` 属性表示触发验证的时机，默认为 `submit`，可选值为 `submit`、`blur`、`change`，只对当前字段生效。
const rules = ref({
    // 字符串类型
	name: [
		{ required: true, message: "请输入姓名", trigger: "blur" },
		{ min: 2, max: 10, message: "姓名长度在 2 到 10 个字符" },
	],
    // 数字类型
	age: [
		{ type: "number", required: true, message: "请输入年龄", trigger: "blur" },
		{ type: "number", message: "年龄必须为数字" },
		{ type: "number", min: 0, max: 120, message: "年龄范围在 0 到 120 岁" },
	],
    // 单选类型
	gender: [
		{ required: true, message: "请选择性别", trigger: "change" },
	],
    // 邮箱类型
	email: [
		{ required: true, message: "请输入邮箱", trigger: "blur" },
		{ type: "email", message: "邮箱格式不正确" },
	],
    // 自定义验证函数
	phone: [
		{ required: true, message: "请输入手机号" },
		{
			type: "string", trigger: "blur", validator: (rule, value, callback) => {
				if (value.length !== 11) {
					callback(new Error("手机号长度必须为 11 位"));
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(value)) {
					callback(new Error("手机号格式不正确"));
					return;
				}
				callback();
			}
		},
	],
    // 弹出选择器类型
	address: [
		{ required: true, message: "请输入地址", trigger: "blur" },
		{ min: 2, max: 100, message: "地址长度在 2 到 100 个字符" },
	],
    // 多选类型
	hobby: [
		{ type: "array", required: true, message: "请选择爱好", trigger: "change" },
		{ type: "array", min: 1, max: 3, message: "爱好数量在 1 到 3 个" },
	],
    // 布尔类型
	display: [
		{ type: "boolean", required: true, message: "请选择是否展示资料", trigger: "change" },
	],
    // 日期
	birthday: [
		{
			type: "date", required: true, message: "请选择生日", trigger: "change"
		},
	]
});
</script>

表单验证 ​

  • 通过 validate 方法进行表单验证。
  • 通过 validateField 方法验证一个或多个字段。
  • 通过 reset 方法重置表单。
vue
<template>
    <pure-form :form="form" :rules="rules" ref="formRef"></pure-form>
    <pure-button text="提交" @click="handleSubmit"></pure-button>
    <pure-button text="重置" @click="handleReset"></pure-button>
</template>

<script setup>
import { ref } from "vue";

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

// 表单数据和规则
const form = ref({
    // ...
 });
const rules = ref({
    //...
 });

// 提交表单
function handleSubmit() {
    // 验证一个字段
    // 第一个参数为字段名，第二个参数为回调函数
    // errors: 错误信息，为 undefined 时表示验证通过。
    // fields: 验证失败的字段。
    formRef.value.validateField("name", (errors, fields) => {
		if(!errors) {
            console.log("姓名验证通过");
        } else {
            console.log("表单验证失败", errors, fields);
        }
	});

    // 验证多个字段
    // 第一个参数为字段名，第二个参数为回调函数
    // errors: 错误信息，为 undefined 时表示验证通过。
    // fields: 验证失败的字段。
    formRef.value.validateField(["name", "age"], (errors, fields) => {
		if(!errors) {
            console.log("姓名和年龄验证通过");
        } else {
            console.log("表单验证失败", errors, fields);
        }
	});

    // 验证整个表单
    // errors: 错误信息，为 undefined 时表示验证通过。
    // fields: 验证失败的字段。
	formRef.value.validate((errors, fields) => {
		if (!errors) {
			console.log("表单验证通过");
		} else {
			console.log("表单验证失败", errors, fields);
		}
	});
}

// 重置表单
function handleReset() {
    // reset() 方法会返回表单的默认值，你需要手动更新一下。
	form.value = formRef.value.reset();
}
</script>

Props ​

属性名说明类型默认值可选值版本
form表单数据Object{}-+1.0.0
defaultForm默认表单数据，重置后的数据Object{}-+1.0.0
rules表单验证规则Object{}-+1.0.0
requiredText整个表单中必填项的符号、文字String*-+1.0.0
validateTrigger验证时机Stringsubmitblur、change+1.0.0
readonly只读整个表单？Booleanfalsetrue+1.0.0
disabled禁用整个表单？Booleanfalsetrue+1.0.0
disabledClass禁用类名Stringpure-field-disabled-+1.0.0
first第一个未通过校验的字段发生错误就调用 callback，即不再继续校验剩余字段Booleanfalsetrue+1.0.0
firstFields每个字段的第一个规则发生错误就调用 callback，即不再继续校验该字段的剩余规则Booleanfalsetrue+1.0.0
suppressWarnings是否禁止无效值的内部警告Booleantruetrue+1.0.0

Expose ​

函数说明参数返回值版本
validate验证整个表单一个回调函数，参数详见上方示例中的注释说明，(errors, fields) => {}无+1.0.0
validateField验证一个或多个字段一个回调函数，参数详见上方示例中的注释说明，fileNames, (errors, fields) => {}无+1.0.0

辅助类 ​

类名说明版本
pure-field-border-top表单字段上边框+1.0.0
pure-field-border-bottom表单字段下边框+1.0.0
pure-field-required-left表单字段必填符号左右居左+1.0.0
pure-field-required-middle表单字段必填符号左右居中+1.0.0
pure-field-required-right表单字段必填符号左右居右+1.0.0
pure-field-required-top表单字段必填符号垂直居顶+1.0.0
pure-field-required-center表单字段必填符号垂直居中+1.0.0
pure-field-required-bottom表单字段必填符号垂直居下+1.0.0
pure-field-required-smaller表单字段必填符号文本大小稍小+1.0.0
pure-field-required-mini表单字段必填符号文本大小最小+1.0.0
pure-field-text-align-left表单字段内容+提示文本居左+1.0.0
pure-field-text-align-center表单字段内容+提示文本居中+1.0.0
pure-field-text-align-right表单字段内容+提示文本居右+1.0.0
pure-field-content-text-align-left表单字段内容文本居左+1.0.0
pure-field-content-text-align-center表单字段内容文本居中+1.0.0
pure-field-content-text-align-right表单字段内容文本居右+1.0.0
pure-field-tips-text-align-left表单字段提示文本居左+1.0.0
pure-field-tips-text-align-center表单字段提示文本居中+1.0.0
pure-field-tips-text-align-right表单字段提示文本居右+1.0.0
pure-field-tips-edge表单字段提示文本贴边+1.0.0
pure-field-vertical表单字段垂直布局+1.0.0
pure-filed-align-top表单字段整体靠顶对齐+1.0.0
pure-filed-align-bottom表单字段整体靠底对齐+1.0.0
pure-filed-align-left-top表单字段左侧部分靠顶对齐+1.0.0
pure-filed-align-left-bottom表单字段左侧部分靠底对齐+1.0.0

基于 MIT 许可发布

版权所有 © 2024-2029 济南晨霜信息技术有限公司