uniapp表单 - 技术栈

1 表单验证绑定的数据key不是：model而是 :modelValue

复制代码

<uni-forms ref="formRef" :modelValue="modelValue" :rules="formRules">

2 自定义验证函数不是validate而是validateFunction

复制代码

const formRules = {
  samplingCount: {
    rules: [
      { required: !unabledEdit.value, errorMessage: '请输入取样数量' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          const num = Number(value)
          if (isNaN(num) || num <= 0) {
            callback('请输入大于 0 的数字')
            return
          }
          const max = props.modelValue.isNeedCode === '1' ? props.modelValue.batchTotalQty : props.modelValue.codeQty
          if (num > max) {
            callback(`最大允许 ${max}`)
            return
          }
          callback()
        }
      }
    ]
  }
}

3 单独对某个表单元素设定blur事件期望通过表单本身去做验证写法

复制代码

  <uni-forms ref="formRef" :modelValue="modelValue" :rules="formRules">
              <uni-forms-item label="取样数量" name="samplingCount">
                <uni-easyinput
                  type="number"
                  v-model="modelValue.samplingCount"
                  :disabled="unabledEdit"
                  placeholder="请输入取样数量"
                  @blur="validateField('samplingCount')"
                />
              </uni-forms-item>
  </uni-forms>



const validateField = (prop: string) => {
  // formRef.value.validateField(prop).catch(() => {})
  console.log('blur 事件触发，验证字段:', prop)
  if (formRef.value && formRef.value.validateField) {
    formRef.value
      .validateField(prop)
      .then(() => {
        console.log('验证成功')
      })
      .catch((error: any) => {
        console.log('验证错误:', error)
      })
  }
}