uView 中的子表单校验需要使用 uni-validate 组件,具体步骤如下:

  1. 在子表单中添加 uni-validate 组件,并设置 ref 值,例如:
<uni-validate ref='childForm' @submit='submitChildForm'>
  <!-- 子表单内容 -->
</uni-validate>
  1. 在父组件中引入 uni-validate 组件,并在 data 中定义一个对象用于存储子表单的校验结果,例如:
import uniValidate from '@/components/uni-validate/uni-validate.vue'

export default {
  components: {
    uniValidate
  },
  data () {
    return {
      childFormValid: {} // 子表单校验结果
    }
  },
  methods: {
    submitChildForm () {
      // 提交子表单
    }
  }
}
  1. 在父组件中添加一个方法用于触发子表单校验,并将校验结果存储到 childFormValid 中,例如:
checkChildFormValid () {
  this.$refs.childForm.checkValidity(valid => {
    this.childFormValid = valid
  })
}
  1. 在父组件中调用 checkChildFormValid 方法,例如:
submitForm () {
  this.checkChildFormValid()
  if (this.formValid && this.childFormValid) {
    // 父表单和子表单均校验通过,提交表单
  }
}

通过以上步骤,即可在 uView 中实现子表单的校验。

uView 子表单校验教程:使用 uni-validate 组件实现

原文地址: https://www.cveoy.top/t/topic/mKON 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录