具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、选择器等元素。
基本使用
表单的完整实例。
<!-- 定义 表单数据 model 校验规则 rules -->
<iui-form ref="formRef" :model="formData" :rules="rules">
<!-- 表单项 需要定义 field -->
<iui-form-item label="Nickname" required field="nickname">
<iui-input
v-model="formData.nickname"
placeholder="Please enter nickanme"
/>
</iui-form-item>
<iui-form-item label="Age" field="age" required>
<iui-input
v-model="formData.age"
placeholder="Please enter age"
type="number"
/>
</iui-form-item>
<iui-form-item label="Gender" field="gender">
<iui-radio-group v-model="formData.gender" style="display: flex">
<iui-space>
<view>
<iui-radio label="male"></iui-radio>
</view>
<view>
<iui-radio label="female"></iui-radio>
</view>
<view>
<iui-radio label="others"></iui-radio>
</view>
</iui-space>
</iui-radio-group>
</iui-form-item>
<iui-form-item label="Favorite" field="favorite">
<iui-checkbox-group v-model="formData.favorite">
<iui-space direction="vertical">
<view>
<iui-checkbox label="Football"></iui-checkbox>
</view>
<view>
<iui-checkbox label="Basketball"></iui-checkbox>
</view>
<view>
<iui-checkbox label="Swim"></iui-checkbox>
</view>
</iui-space>
</iui-checkbox-group>
</iui-form-item>
<iui-form-item label="Score" field="score">
<iui-rate v-model="formData.score"></iui-rate>
</iui-form-item>
<iui-form-item label="Progress" field="progress">
<iui-slider v-model="formData.progress"></iui-slider>
</iui-form-item>
<iui-form-item label="Subscribe" align="center" field="subscribe">
<iui-switch v-model="formData.subscribe"></iui-switch>
</iui-form-item>
<iui-form-item label="Remark" field="remark" required>
<iui-textarea
v-model="formData.remark"
placeholder="Please enter remark"
showLimit
></iui-textarea>
</iui-form-item>
</iui-form>
<view style="padding: 16px">
<iui-button type="primary" @click="handleSubmit">Submit</iui-button>
</view>
<!-- 定义 表单数据 model 校验规则 rules -->
<iui-form ref="formRef" :model="formData" :rules="rules">
<!-- 表单项 需要定义 field -->
<iui-form-item label="Nickname" required field="nickname">
<iui-input
v-model="formData.nickname"
placeholder="Please enter nickanme"
/>
</iui-form-item>
<iui-form-item label="Age" field="age" required>
<iui-input
v-model="formData.age"
placeholder="Please enter age"
type="number"
/>
</iui-form-item>
<iui-form-item label="Gender" field="gender">
<iui-radio-group v-model="formData.gender" style="display: flex">
<iui-space>
<view>
<iui-radio label="male"></iui-radio>
</view>
<view>
<iui-radio label="female"></iui-radio>
</view>
<view>
<iui-radio label="others"></iui-radio>
</view>
</iui-space>
</iui-radio-group>
</iui-form-item>
<iui-form-item label="Favorite" field="favorite">
<iui-checkbox-group v-model="formData.favorite">
<iui-space direction="vertical">
<view>
<iui-checkbox label="Football"></iui-checkbox>
</view>
<view>
<iui-checkbox label="Basketball"></iui-checkbox>
</view>
<view>
<iui-checkbox label="Swim"></iui-checkbox>
</view>
</iui-space>
</iui-checkbox-group>
</iui-form-item>
<iui-form-item label="Score" field="score">
<iui-rate v-model="formData.score"></iui-rate>
</iui-form-item>
<iui-form-item label="Progress" field="progress">
<iui-slider v-model="formData.progress"></iui-slider>
</iui-form-item>
<iui-form-item label="Subscribe" align="center" field="subscribe">
<iui-switch v-model="formData.subscribe"></iui-switch>
</iui-form-item>
<iui-form-item label="Remark" field="remark" required>
<iui-textarea
v-model="formData.remark"
placeholder="Please enter remark"
showLimit
></iui-textarea>
</iui-form-item>
</iui-form>
<view style="padding: 16px">
<iui-button type="primary" @click="handleSubmit">Submit</iui-button>
</view>
import { reactive, ref } from "vue";
const formRef = ref(null);
// 表单数据
const formData = reactive({
nickname: "",
age: "",
gender: "male",
favorite: [],
score: "",
progress: 0,
subscribe: false,
remark: "",
});
// 校验规则
const rules = {
nickname: [
{ required: true, message: "Please enter nickname", trigger: "blur" },
{
min: 2,
max: 10,
message: "Nickname length should be 2-10",
trigger: "blur",
},
],
age: [
{
type: "number",
required: true,
min: 6,
max: 60,
message: "Age should be 6-60",
trigger: "blur",
},
],
favorite: [
{
type: "array",
required: true,
len: 2,
message: "Please select 2 favorite",
},
],
score: {
type: "number",
required: true,
min: 2,
message: "Score should be 2-5",
},
progress: {
type: "number",
required: true,
min: 20,
message: "Progress should be 20-100",
},
subscribe: {
type: "boolean",
required: true,
message: "Please agree to subscribe",
validator: (_, v) => {
if (!v) {
return false;
} else {
return true;
}
},
},
remark: {
required: true,
min: 10,
max: 100,
message: "Remark length should be 10-100",
trigger: "blur",
},
};
// 提交表单
const handleSubmit = async () => {
const res = await formRef.value.validate();
};
import { reactive, ref } from "vue";
const formRef = ref(null);
// 表单数据
const formData = reactive({
nickname: "",
age: "",
gender: "male",
favorite: [],
score: "",
progress: 0,
subscribe: false,
remark: "",
});
// 校验规则
const rules = {
nickname: [
{ required: true, message: "Please enter nickname", trigger: "blur" },
{
min: 2,
max: 10,
message: "Nickname length should be 2-10",
trigger: "blur",
},
],
age: [
{
type: "number",
required: true,
min: 6,
max: 60,
message: "Age should be 6-60",
trigger: "blur",
},
],
favorite: [
{
type: "array",
required: true,
len: 2,
message: "Please select 2 favorite",
},
],
score: {
type: "number",
required: true,
min: 2,
message: "Score should be 2-5",
},
progress: {
type: "number",
required: true,
min: 20,
message: "Progress should be 20-100",
},
subscribe: {
type: "boolean",
required: true,
message: "Please agree to subscribe",
validator: (_, v) => {
if (!v) {
return false;
} else {
return true;
}
},
},
remark: {
required: true,
min: 10,
max: 100,
message: "Remark length should be 10-100",
trigger: "blur",
},
};
// 提交表单
const handleSubmit = async () => {
const res = await formRef.value.validate();
};
FormItem 组件说明
form-item
组件需要搭配 form
组件使用。 如果需要进行参数校验, form-item
组件的 field
属性必须与 form
组件的 model
对象中的属性名一致。
校验规则
校验功能由 async-validator
提供,一个字段可以设置多个内置规则,以及自定义规则,触发方式等, 每个字段的验证规则为一个数组,数组的每一个元素对象为其中一条规则。如下:
const rules = {
// nickname 包含了两条规则,第一条要求必填,第二条要求长度在 2-10 之间
nickname: [
{ required: true, message: "Please enter nickname", trigger: "blur" },
{
min: 2,
max: 10,
message: "Nickname length should be 2-10",
trigger: "blur",
},
],
age: [
{
type: "number",
required: true,
min: 6,
max: 60,
message: "Age should be 6-60",
trigger: "blur",
},
],
};
const rules = {
// nickname 包含了两条规则,第一条要求必填,第二条要求长度在 2-10 之间
nickname: [
{ required: true, message: "Please enter nickname", trigger: "blur" },
{
min: 2,
max: 10,
message: "Nickname length should be 2-10",
trigger: "blur",
},
],
age: [
{
type: "number",
required: true,
min: 6,
max: 60,
message: "Age should be 6-60",
trigger: "blur",
},
],
};
规则属性
trigger
触发校验的方式trigger
可以同时设置多个值,如trigger: ['blur', 'change']
。blur
失去焦点时触发,目前只支持input
组件。change
值改变时触发。
type
内置校验规则,可以使用正则匹配、或自定义校验方法。string
字符串number
数字boolean
布尔值method
方法regexp
正则表达式integer
整数float
浮点数array
数组object
对象enum
枚举date
日期url
url 地址hex
十六进制email
邮箱any
任意类型
required
是否必填
布尔值,true
为必填,false
为非必填。配置此参数不会显示输入框左边的必填星号,如需要,请配置form-item
的required
属性为true
,pattern
正则表达式
正则表达式,用于校验输入内容是否符合规则。不需要添加引号。min
最小值
用于数字类型的校验,表示最小值。max
最大值
用于数字类型的校验,表示最大值。len
长度
用于字符串或数组类型的校验,表示长度。enum
枚举
用于字符串或数组类型的校验,表示枚举值。whitespace
忽略空格
布尔值,true
表示忽略空格,false
表示不忽略空格。transform
转换
用于转换输入值,如转换为大写、小写等。value
当前校验的值
message
错误提示
字符串,表示校验不通过时的错误提示。validator
自定义校验方法
用于自定义校验方法,返回true
表示校验通过,返回false
表示校验不通过。rule
当前校验规则value
当前校验的值callback
回调函数,用于返回校验结果,callback(true)
表示校验通过,callback(false)
表示校验不通过。
asyncValidator
异步校验方法
用于异步校验方法,返回true
表示校验通过,返回false
表示校验不通过。rule
当前校验规则value
当前校验的值callback
回调函数,用于返回校验结果,callback(true)
表示校验通过,callback(false)
表示校验不通过。
API
<Form>
props<Form>
methods<Form>
slots<FormItem>
props