ViewUI表单数值类型验证

ViewUI表单数据验证的时候常常会碰到数值类型验证出错的问题：

<template>
    <Form ref="form" :model="form" :rules="rule">
        <FormItem prop="id">
            <Input type="text" v-model="form.id" placeholder="输入数值类型" number />
        </FormItem>
        <FormItem>
            <Button type="primary" @click="loginClick('form')">确定</Button>
        </FormItem>
    </Form>
</template>

我们可以在 Input 标签上添加 number 标识就可以将用户的输入转换为 Number 类型。由于这种模式跟 InputNumber 标签不一样，它不会过滤用户输入数据，所以为了确保输入的数据是数值型，我们还应当配合rules规则进行限定：

<script>
    export default {
        name: 'about',
        data() {
            return {
                form: {
                    id: 0,
                },
                rule: {
                    id: [
                        { required: true, message: '必填字段' },
                        {
                            type: 'number',
                            message: '必须为数值型',
                            trigger: 'change',
                        },
                    ],
                },
            };
        },
    };
</script>