input框数字验证--vue,elementui

直接代码

<template>
    <div>
        <el-form :model="formData" ref="formData" :rules="formRules">
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="数字验证框" prop="amt">
                        <el-input v-model.number="formData.amt"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            formData: {
                amt: null
            },
            formRules: {
                amt: [ { required: true,message:'必填信息' }, { type:'number', message: '必须是数字' } ]
            }
        }
    }
}
</script>

注意点

• form表单的数据绑定、rule规则绑定；form-item的prop属性绑定
• input绑定时使用number修饰符默认使用Number进行转换
• rule规则中只写判断的属性和提示信息，不写触发条件，比如不写trigger:'blur'

inputnumber

• vue中有专门的input-number标签，也可以使用