uni-app 在抖音开发者工具上，uni-form 无法校验规则

uni-app 在抖音开发者工具上，uni-form 无法校验规则

操作步骤：

  • 在hello-uniapp演示代码中，点击扩展组件，点击uni-form表单

预期结果：

  • 正确校验规则

实际结果：

  • 无校验，数据也无法取得

bug描述：

  • 在抖音开发者工具上，uni-form 无法校验规则，演示代码hello-uniapp也是无法校验，直接显示通过

| 项目       | 信息               |
|------------|--------------------|
| 产品分类   | uniapp/小程序/字节跳动 |
| PC开发环境操作系统 | Mac                |
| PC开发环境操作系统版本号 | mac os 13.4 (22F66) |
| HBuilderX类型 | 正式               |
| HBuilderX版本号 | 4.15               |
| 第三方开发者工具版本号 | 4.2.4              |
| 基础库版本号 | 所有               |
| 项目创建方式 | HBuilderX          |

更多关于uni-app 在抖音开发者工具上，uni-form 无法校验规则的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

产生这个问题的原因是：在抖音小程序开启virtualHost之后，会对写法产生一些限制，导致这个问题，可以尝试如下操作：

将virtualHost使用条件编译跳过 options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
}, 尝试从插件市场更新插件

更多关于uni-app 在抖音开发者工具上，uni-form 无法校验规则的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还是没有效果唉， 按问答中的方法，setup中和expert default 中都设置 virtualHost:false ，还是无效，以下是设置virtualHost的方法 setup版本： defineOptions({ options: { virtualHost: false } }) 新增script 标签版本：

<script lang="ts"> export default { options: { virtualHost: false } } </script>

uni_ui插件库已经是最新版，用的是npm的形式引入的： “@dcloudio/uni-ui”: “^1.5.6”

仍然无效

回复 h***@163.com: 你好，你单独更新一下 uni-form 试一下，另外，这个virtualHost: false需要在组件中使用

回复 DCloud_UNI_yuhe: 感谢耐心解答，删掉npm方式，不用设置virtualHost:false，在插件市场导入最新版的uni_ui解决了！

抖音基础库3.5.0.12以下版本是可以的，以上版本均不可以

使用vue3运行了示例代码hello uni-app也复现了该问题

同样的问题 vue3 + setup + ts + uni-form 在抖音小程序表单无法验证，直接通过；


感谢反馈，我查看一下是什么导致的

在抖音开发者工具上使用 uni-app 开发时，如果发现 uni-form 无法校验规则，可能是由于以下原因导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 uni-form 和 uni-form-item 的使用

确保你在使用 uni-form 和 uni-form-item 时，绑定了正确的 rules 和 prop。

<uni-form ref="form" :rules="rules">
  <uni-form-item label="用户名" prop="username">
    <input v-model="formData.username" />
  </uni-form-item>
</uni-form>
  • rules 是校验规则对象。
  • prop 是表单字段名，必须与 rules 中的字段名一致。

2. 确保 rules 规则正确

rules 必须是一个对象，且每个字段的校验规则是数组形式。例如：

export default {
  data() {
    return {
      formData: {
        username: '',
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' },
        ],
      },
    };
  },
};

3. 确保触发校验

uni-form 的校验需要通过手动调用 validate 方法触发。例如：

export default {
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('校验通过');
        } else {
          console.log('校验失败');
        }
      });
    },
  },
};

4. 检查抖音开发者工具的兼容性

抖音开发者工具可能对 uni-app 的某些特性支持不完善，导致 uni-form 无法正常工作。可以尝试以下方法：

  • 更新抖音开发者工具：确保你使用的是最新版本的开发者工具。
  • 检查控制台报错：在开发者工具中查看控制台是否有报错信息，根据报错信息进行排查。
  • 使用原生表单组件：如果 uni-form 确实无法正常工作，可以尝试使用抖音原生的小程序表单组件。

5. 测试其他平台

在抖音开发者工具上无法正常工作时，可以尝试在其他平台（如微信开发者工具、H5 浏览器）上运行，看是否能够正常校验。如果其他平台正常，则可能是抖音开发者工具的问题。

6. 使用原生表单校验

如果 uni-form 在抖音开发者工具上确实无法正常工作，可以考虑使用抖音小程序原生的表单校验方式。例如：

<form bindsubmit="submitForm">
  <input name="username" value="{{username}}" />
  <button formType="submit">提交</button>
</form>
回到顶部