uniapp forms验证规则之验证数值

uni-app中如何使用表单验证数值？其中一种方法就是使用uni-forms表单验证。插件地址为： https://ext.dcloud.net.cn/plugin?id=2773。

1. 使用HBuilderX 导入插件或下载并将插件复制到合适的位置。

2. 依据示例项目，填写验证规则。

我们可以看到，设置数值范围的参数为 minimum 和 maximum 。rules的部分属性说明如下：

属性名	类型	说明
maximum	Number	校验最大值（大于）
minimum	Number	校验最小值（小于）

所以，根据提示，示例项目如下：

<template>
    <view class="bg-white flex flex-direction">
        <uni-forms ref="form" :modelValue="current" :rules="rules" validate-trigger="bind" err-show-type="undertext">
            <uni-forms-item name="age" label="年龄" required>
                <input v-model="current.age" placeholder="请输入年龄" name="age" />
            </uni-forms-item>
        </uni-forms>
        <button class="cu-btn bg-blue" @click="submit">确定</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: {
                    age: null,
                },
                rules: {
                    age: {
                        rules: [{
                                required: true,
                                errorMessage: '请输入年龄'
                            },
                            {
                                format: 'number',
                                errorMessage: '年龄只能输入数字'
                            },
                            {
                                minimum : 1 ,
                                maximum : 200,
                                errorMessage :'年龄范围{minimum}~{maximum}'
                            },
                        ]
                    }
                }
            }
        },
        onReady: function() {
            this.$refs.form.setRules(this.rules);
        },
        methods: {
            submit: function() {
                this.$refs['form'].validate()
                    .then(result => {
                        console.log("验证通过", result);
                    })
                    .catch(errors => {
                        console.log("验证不通过=>", errors);
                    })
            }
        }
    }
</script>

<style>

</style>

展示效果如下：

 参考网址

• uni-forms表单： https://ext.dcloud.net.cn/plugin?id=2773