uView 子表单校验教程:使用 uni-validate 组件实现
uView 中的子表单校验需要使用 uni-validate 组件,具体步骤如下:
- 在子表单中添加
uni-validate组件,并设置ref值,例如:
<uni-validate ref='childForm' @submit='submitChildForm'>
<!-- 子表单内容 -->
</uni-validate>
- 在父组件中引入
uni-validate组件,并在data中定义一个对象用于存储子表单的校验结果,例如:
import uniValidate from '@/components/uni-validate/uni-validate.vue'
export default {
components: {
uniValidate
},
data () {
return {
childFormValid: {} // 子表单校验结果
}
},
methods: {
submitChildForm () {
// 提交子表单
}
}
}
- 在父组件中添加一个方法用于触发子表单校验,并将校验结果存储到
childFormValid中,例如:
checkChildFormValid () {
this.$refs.childForm.checkValidity(valid => {
this.childFormValid = valid
})
}
- 在父组件中调用
checkChildFormValid方法,例如:
submitForm () {
this.checkChildFormValid()
if (this.formValid && this.childFormValid) {
// 父表单和子表单均校验通过,提交表单
}
}
通过以上步骤,即可在 uView 中实现子表单的校验。
原文地址: https://www.cveoy.top/t/topic/mKON 著作权归作者所有。请勿转载和采集!