网站系统制作教程视频教程,专利申请,html5 视频播放器 wordpress插件,优化是什么梗 棍勇1、form表单验证(若有时遇到输入框有值但是还是触发验证规则了#xff0c;请检查form表单绑定正确吗、校验规则正确吗、表格数据字段名正确吗)
a-form:modelformState:label-col{ span: 8 }:wrapper-col{ span: 16 }:rulesrul…1、form表单验证(若有时遇到输入框有值但是还是触发验证规则了请检查form表单绑定正确吗、校验规则正确吗、表格数据字段名正确吗)
a-form:modelformState:label-col{ span: 8 }:wrapper-col{ span: 16 }:rulesrulesrefform
a-row :gutter[0, 24]a-col :span8a-form-item namefaqiren label发起人 labelAlignrighta-input v-model:valueformState.faqiren disabled //a-form-item/a-col/a-row/a-form
a-button typeprimary html-typesubmit clickSubmitReview()
提交审核/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:modelformState:label-col{ span: 8 }:wrapper-col{ span: 16 }:rulesrulesrefform
a-row :gutter[0, 24]a-col :span8a-form-item namefaqiren label发起人 labelAlignrighta-input v-model:valueformState.faqiren disabled //a-form-item/a-col/a-row/a-form
//子组件
zhuanchu refform1 v-ifformState.biandongleixing zhuanchu/zhuanchua-button typeprimary html-typesubmit clickSubmitReview()
提交审核/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:modelformState:label-col{ span: 8 }:wrapper-col{ span: 16 }:rulesrulesrefform2
a-row :gutter[0, 24]a-col :span8a-form-item namenianling label年龄 labelAlignrighta-input v-model:valueformState.nianling disabled //a-form-item/a-col/a-row/a-form// 表单数据对象const formState ref({nianling: ,});const rules {nianling: [{required: true,trigger: change,},]};const form2ref()const getDom(){return form2.value}defineExpose({getDom})
