Forms validation value type ViewUI

ViewUI form data validation often encounter when numeric type validation error problem:

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

We can Inputadd the tag numberidentifies the user can convert the input type Number. Since this model with InputNumberdifferent labels, it does not filter the user input data, Therefore, to ensure that the numeric data entry, we shall cooperate with rulesrules defined:

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