uview中子表单的校验

uview中的子表单校验可以通过以下步骤进行：

在父组件中定义一个formData对象，用于存储子组件表单数据。
在父组件中定义一个rules对象，用于设置子组件表单校验规则。
在子组件中定义一个validate方法，用于触发表单校验，并在校验通过时将表单数据传递给父组件。
在父组件中使用v-model双向绑定将子组件的表单数据绑定到formData对象上。
在父组件中使用v-if或v-show指令控制子组件的显示与隐藏。
在父组件中使用u-button组件触发表单校验，并在校验通过时提交表单数据。

示例代码如下：

父组件：

<template>
  <view>
    <sub-form v-model="formData" :rules="rules" ref="subForm"></sub-form>
    <u-button @click="submitForm">提交</u-button>
  </view>
</template>

<script>
import subForm from '@/components/sub-form.vue'

export default {
  components: {
    subForm
  },
  data() {
    return {
      formData: {},
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.subForm.validate(valid => {
        if (valid) {
          // 表单校验通过，提交数据
          this.$api.post('/submit', this.formData)
            .then(res => {
              // 处理提交结果
            })
        }
      })
    }
  }
}
</script>

子组件：

<template>
  <view>
    <u-input v-model="formData.name" label="姓名"></u-input>
    <u-input v-model="formData.age" label="年龄"></u-input>
  </view>
</template>

<script>
export default {
  props: {
    value: Object,
    rules: Object
  },
  data() {
    return {
      formData: {
        name: '',
        age: ''
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.formData = val
      },
      deep: true
    }
  },
  methods: {
    validate(callback) {
      this.$refs.form.validate(valid => {
        if (valid) {
          callback(true)
        } else {
          callback(false)
        }
      })
    }
  }
}
</script>