iview表单验证数字

时间:2022-09-01 20:23:51

验证输入字符串必须为数字

html:

                <FormItem label="兑换积分:" prop="exchangeIntegral">
                    <Input v-model="formSpecAdd.exchangeIntegral" placeholder="请输入兑换积分" style="width: 250px"></Input>
                </FormItem>


                <FormItem label="库存数量:" prop="stockNum">
                    <Input v-model="formSpecAdd.stockNum" placeholder="请输入库存数量" style="width: 250px"></Input>
                </FormItem>


                <FormItem label="商品价值:" prop="productMoney">
                    <Input v-model="formSpecAdd.productMoney" placeholder="请输入商品价值" style="width: 250px"></Input>
                </FormItem>

 

js:

                    exchangeIntegral: [
                        {required: true, message: '请输入兑换积分', trigger: 'blur'},
                        {type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
                    ],

                    stockNum: [
                        {required: true, message: '请输入库存数量', trigger: 'blur'},
                        {type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
                    ],

                    productMoney: [
                        {required: true, message: '请输入商品价值', trigger: 'blur'},
                        {type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
                    ],

 

或者: 直接将输入框定义为 number类型

                <FormItem label="兑换积分:" prop="exchangeIntegral">
                    <Input v-model="formSpecAdd.exchangeIntegral" number placeholder="请输入兑换积分" style="width: 250px"></Input>
                </FormItem>

 

js:验证

                    exchangeIntegral: [
                        {required: true, type: 'number', message: '请输入兑换积分', trigger: 'blur'},
                        {type: 'number', message: '请输入数字', trigger: 'blur'}
                    ],

 

 

请参考:

https://www.cnblogs.com/chenmz1995/p/10804076.html

https://www.iviewui.com/components/form#ZDYYZ

https://github.com/yiminghe/async-validator