uni-app 表单校验最大最小值无效

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 表单校验最大最小值无效

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：Android

手机系统版本号：Android 14

手机厂商：一加

手机机型：一加3V Pro

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<template>
<uni-forms ref="form1" :modelValue="formData1" label-position="top" rules="rules1" label-width="650rpx" >
<uni-forms-item :label="$t('过压保护值(单位:mV)')" name="value1">
<uni-easyinput type="number" v-model="formData1.value1" placeholder="请输入过压保护值" />
</uni-forms-item>
<uni-forms-item :label="$t('过压保护恢复值(单位:mV)')" name="value2">
<uni-easyinput type="number" v-model="formData1.value2" placeholder="请输入过压保护恢复值" />
</uni-forms-item>
<uni-forms-item :label="$t('过压保护延时(单位:秒)')" name="value3">
<uni-easyinput type="number" v-model="formData1.value3" placeholder="请输入过压保护延时" />
</uni-forms-item>
<uni-forms-item :label="$t('欠压保护值(单位:mV)')" name="value4">
<uni-easyinput type="number" v-model="formData1.value4" placeholder="请输入欠压保护值" />
</uni-forms-item>
<uni-forms-item :label="$t('欠压保护恢复值(单位:mV)')" name="value5">
<uni-easyinput type="number" v-model="formData1.value5" placeholder="请输入欠压保护恢复值" />
</uni-forms-item>
<uni-forms-item :label="$t('欠压保护延时(单位:秒)')" name="value6">
<uni-easyinput type="number" v-model="formData1.value6" placeholder="请输入欠压保护延时" />
</uni-forms-item>
</uni-forms>
</template>

<script setup>
let formData1 = reactive({
value1: "3500",
value2: "3500",
value3: 8,
value4: 2000,
value5: 2100,
value6: 8,
})
let rules1 = {
value1: {
rules:[
{required: true, errorMessage: '请输入过压保护值',},
{minimum: 3500, maximum:4300, errorMessage: '请输入3500~4300之间的值'},
],
},
value2: {
rules:[{required: true, errorMessage: '请输入过压保护恢复值',},{minimum: 3500, maximum:4300, errorMessage: '请输入3500~4300之间的值'}],
},
value3: {
rules:[{required: true, errorMessage: '请输入过压保护延时',},{minimum: 1, maximum:10, errorMessage: '请输入1~10之间的值'}],
},
value4: {
rules:[{required: true, errorMessage: '请输入欠压保护值',},{minimum: 2000, maximum:3000, errorMessage: '请输入2000~3000之间的值'}],
},
value5: {
rules:[{required: true, errorMessage: '请输入欠压保护恢复值',},{minimum: 2000, maximum:3000, errorMessage: '请输入2000~3000之间的值'}],
},
value6: {
rules:[{required: true, errorMessage: '请输入欠压保护延时',},{minimum: 1, maximum:10, errorMessage: '请输入1~10之间的值'}],
}
}
</script>

操作步骤：

1

预期结果：

校验string类型或者输入框输出number类型

实际结果：

校验number类型或者输入框输出string类型

bug描述：

输入框的type=“number”，但是输出的是string，校验规则又只能校验number类型，导致校验不生效


Harmonyos Next教程
1 回复

在uni-app中，表单校验通常依赖于rules属性来定义校验规则。如果你发现最大最小值校验无效，可能是由于几个常见原因：输入值的类型不匹配、校验规则配置错误，或者代码实现有误。下面是一个基本的代码示例，展示如何在uni-app中实现表单字段的最大最小值校验。

首先，确保你的uni-app项目已经安装并配置好，然后你可以按照以下步骤设置表单校验。

1. 定义表单数据和校验规则

在你的页面的data函数中定义表单数据和校验规则：

data() {
    return {
        form: {
            age: null, // 假设我们要校验年龄字段
        },
        rules: {
            age: [
                { required: true, message: '请输入年龄', trigger: 'blur' },
                { type: 'number', message: '年龄必须是数字', trigger: ['blur', 'change'] },
                { min: 18, max: 60, message: '年龄必须在18到60之间', trigger: ['blur', 'change'] }
            ]
        }
    };
}

2. 绑定表单和校验规则到视图

在页面的模板部分，使用u-form和u-form-item组件来绑定表单数据和校验规则：

<template>
    <view>
        <u-form :model="form" :rules="rules" ref="formRef">
            <u-form-item label="年龄" prop="age">
                <u-input v-model="form.age" placeholder="请输入年龄"></u-input>
            </u-form-item>
            <u-button type="primary" @click="submitForm">提交</u-button>
        </u-form>
    </view>
</template>

3. 实现提交表单的逻辑

在页面的方法中实现表单提交逻辑，并处理校验结果：

methods: {
    submitForm() {
        this.$refs.formRef.validate((valid) => {
            if (valid) {
                uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                });
            } else {
                console.log('表单校验失败');
                return false;
            }
        });
    }
}

注意点

  • 确保输入的值是数字类型，因为min和max校验是基于数字的比较。
  • trigger属性定义了何时触发校验，通常设置为blur或change。
  • 如果校验仍然无效，检查是否有其他地方（如计算属性或方法）修改了表单数据，这可能会影响校验逻辑。

通过上述步骤，你应该能够在uni-app中实现有效的最大最小值表单校验。如果问题依旧存在，建议检查控制台是否有错误信息，或者检查是否有其他代码干扰了校验过程。

回到顶部