在页面布局中表单会很常用,布局方便的同时还有校验的功能,今天就来浅谈下表单的布局和他的校验功能
一、布局
最简单的布局就是这样;
设置字段 “layout="inline" ” 可以纵向排列,是根据宽度断行;
想要两个一行可以设置input的宽度即可
二、校验
一般校验按钮在表单内部,可以直接使用事件进行校验
name - 是数据 “infoData” 中的key值;
校验时也是根据数据的键值对来的
<a-form
layout="inline"
:label-col="labelCol"
:model="infoData"
@finish="onFinish"
>
<a-form-item label="表单1" name="form1">
<a-input v-model:value="infoData.form1" placeholder="表单1" />
</a-form-item>
<a-form-item label="表单2" name="form2">
<a-input v-model:value="infoData.form2" placeholder="表单2" />
</a-form-item>
<a-form-item label="表单3" name="form3">
<a-input v-model:value="infoData.form3" placeholder="表单3" />
</a-form-item>
<a-form-item label="表单4" name="form4"><p>表单4</p></a-form-item>
<a-form-item label="表单5" name="form5"><p>表单5</p></a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
const labelCol = { style: { width: "110px" } }
const infoData = {
form1: "表单1",
form2: "表单2",
form3: "表单3",
form4: "表单4",
form5: "表单5"
}
const onFinish = (values: any) => {
console.log("Success:", values)
}
上面是常规的校验按钮在表单中,可以直接使用事件去校验;
但是如果校验按钮不在表单中呢,按钮是无法触发表单的校验事件的
可以使用动态校验:
在表单中需要添加
ref="formRef"
<a-form
ref="formRef"
layout="inline"
:model="infoData"
>
<a-form-item label="表单1" name="form1">
<a-input v-model:value="infoData.form1" placeholder="表单1" />
</a-form-item>
<a-form-item label="表单2" name="form2">
<a-input v-model:value="infoData.form2" placeholder="表单2" />
</a-form-item>
<a-form-item label="表单3" name="form3">
<a-input v-model:value="infoData.form3" placeholder="表单3" />
</a-form-item>
<a-form-item label="表单4" name="form4"><p>表单4</p></a-form-item>
<a-form-item label="表单5" name="form5"><p>表单5</p></a-form-item>
</a-form>
// 按钮在表单外
<a-button type="primary" @click="onFinish">Submit</a-button>
const formRef = ref()
const infoData = {
form1: "表单1",
form2: "表单2",
form3: "表单3",
form4: "表单4",
form5: "表单5"
}
const onFinish = () => {
try {
const values = await formRef.value.validateFields()
console.log(values)
} catch (errorInfo) {
console.log("Failed:", errorInfo)
}
}
需要注意的是:
a-form-item 中name是必须要的,与数据中的key是一样的,否则校验会出错哦;
上面的表单只在表单1中写了name值,其他的需要自己按需添加