uni-app 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