流量最大的网站无为网页定制

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})