uniapp表单校验bug

Question

有没有人遇到过图中的问题，uniapp使用uniforms做表单校验的时候，校验信息闪了一下就消失了，找了很多办法还没解决，不知道哪里的问题。

代码如下⬇️

<template>
    <view class="container">
        <uni-forms 
            ref="formRef" 
            :modelValue="formData" 
            label-align="right" 
            label-width="200rpx"
            :rules="rules"
            validate-trigger="bind"
            >
            <uni-forms-item label="小说名称:" required name="name">
    <!--             <view class="input_class">
                    <input type="text" v-model="formData.name"/>
                </view> -->
                <uni-easyinput v-model="formData.name"></uni-easyinput>
            </uni-forms-item>
            
            <uni-forms-item label="小说链接:" required name="novelUrl">
<!--                 <view class="input_class">
                    <input type="text" v-model="formData.novelUrl"/>
                </view> -->
                <uni-easyinput v-model="formData.novelUrl"></uni-easyinput>
            </uni-forms-item>
        </uni-forms>
        
        <view class="btn_footer">
            <BtnVue text="提交" width="500rpx" height="100rpx" bgc="rgb(66, 165, 245)" @click="submit"></BtnVue>
        </view>
    </view>
</template>

<script setup lang="uts">
const formRef = ref()
    
const formData = ref({
    name: '',
    novelUrl: ''
})

const rules = {// 小说名称的校验规则
  name: {
    rules: [
        {
          required: true,
          errorMessage: '请输入小说名',
        }
    ]
  },
  // 小说链接的校验规则
  novelUrl: {
    rules: [
        {
          required: true,
          errorMessage: '请输入小说链接',
        }
    ]
  }
}
const submit = () => {
    formRef.value.validate().then(() => {
        console.log('校验通过，可以提交数据')
        // 这里写提交到服务器的逻辑
    }).catch(errors => {
        console.log('校验失败', errors)
    })
}

onReady(() => {
    
    // 可以使用:rules="rules",也可有使用下面的方式
    // formRef.value.setRules(rules)
})
</script>

<style lang="less" scoped>
.container {
    padding: 20rpx;
    height: 100%;
    .input_class {
        background-color: #efefef;
        border-radius: 10px;
        border: 1px solid beige;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .btn_footer {
        position: absolute;
        bottom: calc(10rpx + env(safe-area-inset-bottom));
        left: 50%;
        transform: translate(-50%);
    }
}
</style>

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

你提到的问题是：在使用 uniapp 的 uniforms 进行表单校验时，校验信息闪了一下就消失了。这通常是因为 校验提示的显示时间过短或样式问题导致的，也可能是 事件触发方式不正确。

---

一、问题分析

1. 校验信息一闪而过：说明校验逻辑是正常执行的，但提示信息没有被正确渲染或显示时间太短。
2. validate-trigger="bind"：这个配置表示只有在绑定数据变化后才会触发校验，而不是在点击提交按钮时自动触发校验，这可能导致校验信息未被正确展示。
3. 组件兼容性问题：uni-easyinput 和 uni-forms 在某些平台（如微信小程序）可能存在兼容性问题。

---

二、解决方案

1. 修改 validate-trigger 为 "submit"

将 validate-trigger="bind" 改为 "submit"，这样在点击提交按钮时才会触发校验，避免在输入过程中频繁触发校验信息闪现。

<uni-forms 
    ref="formRef" 
    :modelValue="formData" 
    label-align="right" 
    label-width="200rpx"
    :rules="rules"
    validate-trigger="submit"
>

重点： validate-trigger="submit" 是确保校验信息只在提交时显示的关键设置。

---

2. 检查 uni-easyinput 是否支持校验提示

有些第三方组件（如 uni-easyinput）可能没有完全支持 uni-forms 的校验提示功能。建议尝试使用原生 <input> 组件进行测试，确认是否是组件兼容性问题。

<!-- 替换 uni-easyinput 为 input -->
<uni-forms-item label="小说名称:" required name="name">
    <input type="text" v-model="formData.name"/>
</uni-forms-item>

重点： 如果使用原生 <input> 后校验提示正常，那么问题出在 uni-easyinput 上，需要查看其文档或考虑替换组件。

---

3. 添加 show-error 属性（如果支持）

部分 uni-app 组件支持 show-error 属性来控制错误信息的显示方式。可以尝试添加该属性：

<uni-easyinput v-model="formData.name" show-error></uni-easyinput>

重点： 如果组件支持 show-error，它会更明确地显示错误信息。

---

4. 手动控制错误信息的显示

如果你仍然无法解决，可以通过 uni-forms 的 validate 方法获取错误信息，并手动控制提示内容。

修改 submit 函数如下：

const submit = () => {
    formRef.value.validate().then(() => {
        console.log('校验通过，可以提交数据')
        // 这里写提交到服务器的逻辑
    }).catch(errors => {
        console.log('校验失败', errors)
        // 手动弹出错误提示
        uni.showToast({
            title: '请检查表单',
            icon: 'none'
        })
    })
}

重点： 通过 uni.showToast() 或自定义弹窗组件，可以避免系统默认的错误提示一闪而过的问题。

---

5. 检查平台兼容性

• 微信小程序：uni-forms 和 uni-easyinput 可能存在兼容性问题，建议使用官方组件（如 u-form）替代。
• H5 / App：一般兼容性较好，但依然建议测试不同平台表现。

---

三、推荐优化后的代码示例

<template>
    <view class="container">
        <uni-forms 
            ref="formRef" 
            :modelValue="formData" 
            label-align="right" 
            label-width="200rpx"
            :rules="rules"
            validate-trigger="submit"
        >
            <uni-forms-item label="小说名称:" required name="name">
                <uni-easyinput v-model="formData.name" show-error />
            </uni-forms-item>

            <uni-forms-item label="小说链接:" required name="novelUrl">
                <uni-easyinput v-model="formData.novelUrl" show-error />
            </uni-forms-item>
        </uni-forms>

        <view class="btn_footer">
            <BtnVue text="提交" width="500rpx" height="100rpx" bgc="rgb(66, 165, 245)" @click="submit"></BtnVue>
        </view>
    </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const formRef = ref()
const formData = ref({
    name: '',
    novelUrl: ''
})

const rules = {
    name: {
        rules: [
            { required: true, errorMessage: '请输入小说名' }
        ]
    },
    novelUrl: {
        rules: [
            { required: true, errorMessage: '请输入小说链接' }
        ]
    }
}

const submit = () => {
    formRef.value.validate().then(() => {
        console.log('校验通过，可以提交数据')
        // 提交逻辑
    }).catch(errors => {
        console.log('校验失败', errors)
        uni.showToast({
            title: '请检查表单',
            icon: 'none'
        })
    })
}

onReady(() => {
    // 可选：动态设置规则
    // formRef.value.setRules(rules)
})
</script>

<style lang="less" scoped>
.container {
    padding: 20rpx;
    height: 100%;
    .input_class {
        background-color: #efefef;
        border-radius: 10px;
        border: 1px solid beige;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .btn_footer {
        position: absolute;
        bottom: calc(10rpx + env(safe-area-inset-bottom));
        left: 50%;
        transform: translate(-50%);
    }
}
</style>

---

四、总结

| 问题原因 | 解决方案 | |----------|----------| | 校验信息一闪而过 | 设置 validate-trigger="submit" | | 组件兼容性问题 | 使用原生 <input> 或官方组件 | | 错误提示无法显示 | 添加 show-error 属性或手动提示 | | 平台差异 | 测试不同平台并调整组件 |

---

如有更多关于 uni-forms 的用法或具体报错信息，欢迎继续提问！