您现在的位置是：网站首页>前端技术>HTML5教程HTML5教程
el-form 常用验证数字，价格输入
神夜2022-03-14 22:28:21【HTML5教程】2980人已围观文章来源：神夜个人博客
简介
<style scoped="scoped">
/deep/ .el-dialog__header{ padding:12px; border-bottom:1px solid #eee;}
/deep/ .el-dialog__title{ font-size:16px;}
/deep/ .el-dialog__body{padding:20px;}
.column-dialog /deep/ .el-dialog{ width:40%; min-width:550px;}
/deep/ .el-upload--picture-card{ width:88px; height:88px; line-height:90px;}
/deep/ .el-upload-list--picture-card .el-upload-list__item{ width:88px; height:88px;}
.form .input{ width:255px;}
.form .tips{ color:#bfbfbf;}
</style>
<template>
<div>
<el-dialog title="添加优惠券" class="column-dialog" :visible.sync="dialogVisible">
<el-form ref="form" class="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="面额:" prop="value" v-if="form.type==0">
<el-input placeholder="面额只能是数值,限2位小数" class="input" @input="formatNum(form.value, 'value')" v-model.trim="form.value">
<template slot="append">元</template>
</el-input>
<p class="tips">面额只能是数值，限2位小数，有使用门槛时需小于门槛数字</p>
</el-form-item>
<el-form-item label="折扣比例:" prop="value" v-if="form.type==1">
<el-input placeholder="折扣只能是数值,限2位小数" class="input" @input="formatNum(form.value, 'value')" v-model.trim="form.value">
<template slot="append">折</template>
</el-input>
<p class="tips">折扣只能是1-10的数值，限2位小数</p>
</el-form-item>
<el-form-item label="有效期:" prop="validate_type">
<p><el-input placeholder="请输入生效天数:" maxlength="999999" class="input" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.trim="form.validate" v-if="form.validate_type==0">
<template slot="append">天</template>
</el-input></p>
</el-form-item>
<el-form-item label="发放总数量:" prop="total">
<el-input placeholder="只能输入正整数" maxlength="999999" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" class="input" v-model.trim="form.total">
<template slot="append">张</template>
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submit">添 加</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default{
name:'AddCoupon',
data(){
var validateLimit = (rule, value, callback) => {
if (value > this.form.total) {
callback(new Error('限令数量不能大于发放总数'));
} else {
callback();
}
};
return{
dialogVisible:false,
imgList:[],
queryDatetime:[],
expireTimeOption: { //时间范围
disabledDate(time) {
return time.getTime() > Date.now();
}
},
startTimeEndTime:[],
form:{
type:0, //优惠劵类型，0：满减，1：折扣'
value:'', //面值
total:'', //发送总烽
limit:'', //限领数量
},
rules: {
total: [
{ required: true, message: '请输入发放总数量', trigger: 'blur' },
{ pattern: /^[0-9]*$/, message: "只能输入正整数", trigger:'change'}
],
limit: [
{ required: true, message: '请输入每人限领数量', trigger: 'blur' },
{ pattern: /^[0-9]*$/, message: "只能输入正整数", trigger:'change'},
{ validator: validateLimit, trigger: 'change' }
]
}
}
},
mounted() {
},
methods:{
formatNum(val, key) {
let temp = val.toString();
temp = temp.replace(/。/g, ".");
temp = temp.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
temp = temp.replace(/^\./g, ""); //验证第一个字符是数字
temp = temp.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
this.form[key] = temp;
},
}
}
</script>
<style>
</style>
下一篇：没有了
本栏推荐
完美后台框架syadmin
猜你喜欢
站点信息
- 建站时间：2017-10-24
- 网站程序：Hsycms 3.0
- 文章统计：511条
- 微信公众号：扫描二维码，关注我们
