iview表單驗證數字

驗證輸入字符串必須為數字

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