1. 程式人生 > 其它 >Element-UI 中使用rules驗證 金額 數字

Element-UI 中使用rules驗證 金額 數字

data中定義驗證規則:

var checkCount = function (rule, val, callback) { if (!val) { return callback(new Error("數量不能為空")); } var reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}(\.{0,1}\d{1,3}){0,1}$/; if (!reg.test(val)) { return callback(new Error("格式錯誤,至多三位小數")); } return callback(); }; var checkPrice = function (rule, val, callback) { if (!val) { return callback(new Error("單價不能為空")); } var reg = /^\d+(\.{0,1}\d{1,4}){0,1}$/; if (!reg.test(val)) { return callback(new Error("格式錯誤,至多四位小數")); } return callback(); }; var checkScore = function (rule, val, callback) { if (!val) { return callback(new Error("分值不能為空")); } var reg = /^\d+(\.{0,1}\d{1,2}){0,1}$/; if (!reg.test(val)) { return callback(new Error("格式錯誤,至多兩位小數")); } if(parseFloat(val) > 100){ return callback(new Error("分值最大隻能是100")); } return callback(); };

  rules 下面進行引用data中的驗證規則

rules: {
                    deptName: [{
                        required: true,
                        message: "請選擇",
                        trigger: ["change", "blur"]
                    }],
                    score: [{
                        required: true,
                        message: " ",
                        trigger: ["change", "blur"]
                    },
                    {
                        validator: checkScore,
                        trigger: ["change", "blur"]
                    }],
                    count: [{
                        required: true,
                        message: " ",
                        trigger: ["change", "blur"]
                    },
                    {
                        validator: checkCount,
                        trigger: ["change", "blur"]
                    }],
                    price: [{
                        required: true,
                        message: " ",
                        trigger: ["change", "blur"]
                    },
                    {
                        validator: checkPrice,
                        trigger: ["change", "blur"]
                    }],
                    targetName: [{
                        required: true,
                        message: " ",
                        trigger: ["change", "blur"]
                    }],
                }

  模板中使用:

 <el-form-item label="報送結算金額(含稅):" prop="totalSettleAmount" :rules="rules.price">
            <el-input  v-model="value.totalSettleAmount"  placeholder="請輸入報送結算金額(含稅)"  clearable  ><template slot="append">元</template></el-input> 
          </el-form-item>