uni-app uni-from组件页面初始化后点击提交校验无效问题

uni-app uni-from组件页面初始化后点击提交校验无效问题

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

10 64位 专业版

HBuilderX类型：

正式

HBuilderX版本号：

3.2.3

浏览器平台：

Chrome

浏览器版本：

92.0.4515.131（正式版本）

项目创建方式：

HBuilderX

bug描述：

复制uniapp官方程序demo中的\pages\extUI\forms\forms.nvue文件到自己的nue文件中，运行里面的代码，选择表单校验中的demo,点击提交，校验通过，但是用户没有输入任何内容。 校验通过和无数据输入请见截图。

截图：

截图

示例代码：

太多了，请见我的附件程序吧。

操作步骤：

运行我的程序，找到表单校验部分的代码，不要输入任何内容，点击提交，程序提示校验通过。

预期结果：

校验不通过，提示用户输入相应的内容。

实际结果：

校验通过，但是用户输入的内容不合法。


更多关于uni-app uni-from组件页面初始化后点击提交校验无效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

从插件市场导入一个新的 uni-forms 组件试一试 https://ext.dcloud.net.cn/plugin?id=2773

更多关于uni-app uni-from组件页面初始化后点击提交校验无效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


11月19 了 , 此问题还在

根据您描述的问题，这很可能是由于 uni-forms 组件在页面初始化时，表单数据模型（model）与校验规则（rules）未正确绑定或初始化顺序不当导致的。

在 uni-app 中，uni-forms 组件的数据校验依赖于 model 和 rules 的同步。如果 model 中的字段在初始化时未定义，或者 rules 在 model 设置之前就已绑定，可能导致校验逻辑无法正确捕获字段状态。

请检查并尝试以下解决方案：

  1. 确保 model 初始值完整
    在 data 中初始化 model 时，确保所有需要校验的字段都有初始值（即使是空字符串）。例如：

    data() {
  return {
    formData: {
      name: '',
      email: ''
    },
    rules: { ... }
  }
}

  2. 在 onReady 生命周期中设置规则
    如果规则是动态生成的，建议在 onReady 生命周期中调用 setRules 方法，确保表单已渲染完成后再绑定规则：

    onReady() {
  this.$refs.form.setRules(this.rules)
}

  3. 使用 validateField 或 validate 方法
    在提交时，明确调用校验方法。例如：

    this.$refs.form.validate().then(res => {
  console.log('校验结果:', res)
}).catch(err => {
  console.log('校验失败:', err)
})
回到顶部