vue+element-ui 实现价格的输入限制

<>实现的功能

勾选结算方式，输入价格，并对输入的价格进行验证和输入的限制。

<>具体的实现逻辑
<el-form size="mini" :model="prize" ref="prize"> <el-checkbox-group
v-model="checkedPay"> <div v-for="(type, index) in payType" :key="type.label"
class="pay-name" > <el-checkbox :label="type.label"
@change="handleCheckedPayChange(index, type)" > {{ type.name }} </el-checkbox>
<el-form-item label-width="100px" label="单价" v-if="modalShow[type.label]"
style="display:inline-block;" :prop="type.label" :rules="[{ required: true,
message: '不能为空', trigger: 'blur' }]" > <el-input step="0.1"
v-model="prize[type.label]" @change="materielExtraCostChange(type.label)"
@keyup.native=" prize[type.label] = prize[type.label].replace(
prize[type.label], RestrictedMoney(prize[type.label]) ) " ></el-input>
</el-form-item> </div> </el-checkbox-group> </el-form> <script> /** * 输入价格的限制
*/ var plusOrMinus = (values) => { let newValue; if (!/[^0-9.-]/g.test(values))
{ newValue = values .replace(/[^\-\d.]/g, "") .replace(/\b(0+){2,}/g, "0")
.replace(/-{2,}/g, "-") .replace(/^\./g, "") .replace(/\.{2,}/g, ".")
.replace(".", "$#$") .replace(/\./g, "") .replace("$#$", "."); if (
newValue.toString().indexOf(".") > 0 &&
Number(newValue.toString().split(".")[1].length) > 2 ) { newValue =
parseInt(parseFloat(newValue) * 100) / 100; } if
(newValue.toString().split("-").length - 1 > 1) { newValue =
parseFloat(newValue) || ""; } if ( newValue.toString().split("-").length > 1 &&
newValue.toString().split("-")[0].length > 0 ) { newValue =
parseFloat(newValue) || ""; } if ( newValue.toString().length > 1 &&
(newValue.toString().charAt(0) === "0" || (newValue.toString().length > 2 &&
newValue.toString().charAt(0) === "-" && newValue.toString().charAt(1) === "0"
&& newValue.toString().charAt(2) !== ".")) && newValue.toString().indexOf(".")
< 1 ) { newValue = parseFloat(newValue) || ""; } // 判断整数位最多为9位 if (
newValue.toString().indexOf(".") > 0 &&
Number(newValue.toString().split(".")[0].length) > 9 ) { newValue =
newValue.toString().substring(0, 9) + "." + newValue.toString().split(".")[1];
} else if ( newValue.toString().indexOf(".") < 0 &&
Number(newValue.toString().split(".")[0].length) > 9 ) { newValue =
newValue.toString().substring(0, 9); } } else { newValue =
values.replace(/[^0-9.-]/g, ""); } return newValue; } data() { var checkPrize =
(rule, value, callback) => { if (!value) { return callback(new Error("不能为空"));
} }; var RestrictedMoney = values => { return plusOrMinus(values.toString());
}; return { RestrictedMoney: RestrictedMoney, payType: [ { label: "anzhuang",
name: "安装" }, { label: "jihuo", name: "激活" }, { label: "zhuce", name: "注册" }, {
label: "cps", name: "CPS" } ], modalShow: {}, checkedPay: [], prize: {
anzhuang: "", jihuo: "", zhuce: "", cps: "" }, rules: { anzhuang: [{ validator:
checkPrize, trigger: "blur" }], jihuo: [{ validator: checkPrize, trigger:
"blur" }], zhuce: [{ validator: checkPrize, trigger: "blur" }], cps: [{
validator: checkPrize, trigger: "blur" }] } }; }, created() { for (let i in
this.payType) { this.$set(this.modalShow, this.payType[i].label, false); } },
methods: { handleCheckedPayChange(i, type) { if
(this.checkedPay.indexOf(type.label) !== -1) { this.modalShow[type.label] =
true; } else { this.modalShow[type.label] = false; this.prize[type.label] = "";
} }, setData() { var _self = this; return this.checkedPay.map(item => { let
current = _self.payType.find(cur => { return cur.label === item; }); return {
payment_method: current.name, payment_amount: _self.prize[current.label] || 0
}; }); }, sendPostData() { this.$refs["prize"].validate(valid => { if (valid) {
alert('提交); }else { console.log('出错); } }, materielExtraCostChange(label) { //
防止删除为空 if (!this.prize[label]) { this.prize[label] = "0.00"; } // 一些错误金额输入的判断
if ( this.prize[label].toString().indexOf(".") > 0 &&
Number(this.prize[label].toString().split(".")[1].length) < 1 ) {
this.prize[label] = this.prize[label].toString().split(".")[0]; }
this.prize[label] = parseFloat(this.prize[label]).toFixed(2); } } </script>

• « 上一篇：rsync:recv_generator: mkdir (in backup) failed:Permission denied (13) |failed to set times on "."
• » 下一篇：JAVA实现简单的切面注解