网站推广策划方案范文/怎么建立网站的步骤

在页面布局中表单会很常用，布局方便的同时还有校验的功能，今天就来浅谈下表单的布局和他的校验功能

一、布局

最简单的布局就是这样；

设置字段 “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值，其他的需要自己按需添加