Element-UI 中使用rules驗證 金額 數字
阿新 • • 發佈:2022-03-11
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>