您现在的位置是:网站首页>前端技术>HTML5教程HTML5教程

el-form 常用验证数字,价格输入

神夜2022-03-14 22:28:21HTML5教程1356人已围观文章来源:神夜个人博客

简介

<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>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们