<template>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="优惠券金额" prop="discount_amount">
<el-input
v-model="ruleForm.discount_amount"
@input="handleInput"
placeholder="请输入正整数"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
discount_amount: "",
},
rules: {
discount_amount: [
{ required: true, message: "请输入优惠券金额", trigger: "blur" },
],
},
};
},
methods: {
handleInput() {
this.ruleForm.discount_amount = this.ruleForm.discount_amount
.replace(/\D/g, "") // 只允许输入数字
.replace(/^0+/, ""); // 禁止输入前导0
},
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert("提交成功!");
} else {
console.log("表单验证失败");
return false;
}
});
},
},
};
</script>
input限制只能输入正整数,并能通过el-form表单验证
最新推荐文章于 2025-04-10 17:04:31 发布