uni-app uni-forms组件校验无效

在使用 uni-app 的 uni-forms 组件时，如果发现表单校验无效，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：

1. 确保 uni-forms 和 uni-forms-item 正确使用

uni-forms 是表单容器，uni-forms-item 是表单项容器。确保每个表单项都包裹在 uni-forms-item 中，并且 uni-forms-item 的 name 属性与 uni-forms 的 model 中的字段名一致。

<uni-forms ref="form" :model="formData" :rules="rules">
  <uni-forms-item label="用户名" name="username">
    <uni-easyinput v-model="formData.username" />
  </uni-forms-item>
  <uni-forms-item label="密码" name="password">
    <uni-easyinput type="password" v-model="formData.password" />
  </uni-forms-item>
</uni-forms>

2. 确保 rules 规则正确配置

rules 是校验规则对象，确保每个字段的校验规则正确配置。例如：

export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: {
          rules: [
            { required: true, errorMessage: '用户名不能为空' }
          ]
        },
        password: {
          rules: [
            { required: true, errorMessage: '密码不能为空' }
          ]
        }
      }
    }
  }
}

3. 确保 v-model 绑定正确

确保 uni-easyinput 或其他输入组件的 v-model 绑定到 formData 中的正确字段。

4. 确保 ref 属性正确设置

uni-forms 组件需要设置 ref 属性，以便在提交表单时调用校验方法。

<uni-forms ref="form" :model="formData" :rules="rules">
  <!-- 表单项 -->
</uni-forms>

5. 调用校验方法

在提交表单时，需要调用 uni-forms 的 validate 方法进行校验。

methods: {
  submitForm() {
    this.$refs.form.validate().then(res => {
      console.log('校验通过', res)
    }).catch(err => {
      console.log('校验失败', err)
    })
  }
}

6. 确保 uni-forms 版本兼容

确保你使用的 uni-forms 组件版本与 uni-app 版本兼容。如果版本不兼容，可能会导致校验无效。

7. 检查是否有其他插件冲突

如果你在项目中使用了其他表单校验插件或库，可能会导致冲突。尝试暂时禁用其他插件，看看问题是否依然存在。

8. 查看控制台错误信息

打开浏览器的开发者工具，查看控制台是否有错误信息。错误信息可能会提供一些线索，帮助你找到问题所在。

9. 确保 uni-forms 的 model 和 rules 是响应式的

确保 formData 和 rules 是响应式的，即它们应该在 data 中定义，而不是在 methods 或 computed 中。

10. 确保 uni-forms 的 model 和 rules 是对象

model 和 rules 应该是对象，而不是数组或其他类型。

data() {
  return {
    formData: {
      username: '',
      password: ''
    },
    rules: {
      username: {
        rules: [
          { required: true, errorMessage: '用户名不能为空' }
        ]
      },
      password: {
        rules: [
          { required: true, errorMessage: '密码不能为空' }
        ]
      }
    }
  }
}