1、form表单验证(若有时遇到输入框有值但是还是触发验证规则了,请检查form表单绑定正确吗、校验规则正确吗、表格数据字段名正确吗)
<a-form:model="formState":label-col="{ span: 8 }":wrapper-col="{ span: 16 }":rules="rules"ref="form"
><a-row :gutter="[0, 24]"><a-col :span="8"><a-form-item name="faqiren" label="发起人" labelAlign="right"><a-input v-model:value="formState.faqiren" disabled /></a-form-item></a-col></a-row></a-form>
<a-button type="primary" html-type="submit" @click="SubmitReview()">
提交审核</a-button>// 表单数据对象const formState = ref({faqiren: '',});const rules = {faqiren: [{required: true,trigger: 'change',},]};
2、form表单外验证
const form = ref();
const SubmitReview = () => {form.value.validateFields().then((values) => {console.log('验证通过,表单数据为:', values);}).catch((errorInfo) => {console.log('验证失败,错误信息为:', errorInfo);});
};
3、父子嵌套多个表单校验(父组件中有一个form表单,子组件中也有一个form表单,需求是在父组件中统一处理父组件和子组件的2个表单的校验)
父组件
//父组件
<a-form:model="formState":label-col="{ span: 8 }":wrapper-col="{ span: 16 }":rules="rules"ref="form"
><a-row :gutter="[0, 24]"><a-col :span="8"><a-form-item name="faqiren" label="发起人" labelAlign="right"><a-input v-model:value="formState.faqiren" disabled /></a-form-item></a-col></a-row></a-form>
//子组件
<zhuanchu ref="form1" v-if="formState.biandongleixing == 'zhuanchu'"></zhuanchu><a-button type="primary" html-type="submit" @click="SubmitReview()">
提交审核</a-button>// 表单数据对象const formState = ref({faqiren: '',});const rules = {faqiren: [{required: true,trigger: 'change',},]};const form = ref();
const SubmitReview = () => {
//父组件校验form.value.validateFields().then((values) => {console.log('验证通过,表单数据为:', values);}).catch((errorInfo) => {console.log('验证失败,错误信息为:', errorInfo);});
//子组件校验form1.value.getDom().validateFields().then((values) => {console.log('验证通过,表单数据为:', values);}).catch((errorInfo) => {console.log('验证失败,错误信息为:', errorInfo);});
};
子组件
//子组件
<a-form:model="formState":label-col="{ span: 8 }":wrapper-col="{ span: 16 }":rules="rules"ref="form2"
><a-row :gutter="[0, 24]"><a-col :span="8"><a-form-item name="nianling" label="年龄" labelAlign="right"><a-input v-model:value="formState.nianling" disabled /></a-form-item></a-col></a-row></a-form>// 表单数据对象const formState = ref({nianling: '',});const rules = {nianling: [{required: true,trigger: 'change',},]};const form2=ref()const getDom=()=>{return form2.value}defineExpose({getDom})