[element-ui]对el-input输入值的一些处理

背景：

在input输入的时候，经常有一些特殊的限制，下面对我遇到的一些需求做个汇总。

---

1.关于数字的校验相关（keyup和blur事件）

页面样式如下：

要求：

1、在输入的时候自动去除与数字无关的字符，只保留数字，再转成整数型

2、在失去焦点的时候限制数值范围

html代码如下：

<el-input v-model.trim="budgetAll" 
           @keyup.native="handleNumberType"
           @blur="handleNumberRange"
           placeholder="不限"></el-input>

js代码如下：

handleNumberType(e) {
  if(e.target.value) { //如果有值（此时值类型为字符串）
    e.target.value = e.target.value.replace(/[^\.\d]/g,'') //替换掉与数字无关的字符（中英文与符号都会被替换掉，只留下数字，此时值类型为字符串）
    if(e.target.value) { //如果替换后还有值
      e.target.value = parseInt(e.target.value); //把字符型转成整数型
    }
  }
},
handleNumberRange(e) {
      if(e.target.value && (e.target.value < 10 || e.target.value > 9999999)) {
         this.$message.error('请输入10~9999999的正整数')
         return
       }
},

注：replace(new RegExp(',','gm'),'') 可以替换掉所有“，”

小数取整的方法还有：

1.Math.ceil()方法：向上取整，不管小数部分是多少，整数部分值都+1  

        Math.ceil(3/2) 输出：2

2.Math.floor()方法：向下取整，不管小数部分是多少，整数部分值都不变，只取整数部分         Math.floor(3/2) 输出：1

3.Math.round()方法：四舍五入取整

        Math.round(3/2) 输出：2

4.parseInt()方法：抛去小数部分，不管小数部分是多少，只取整数部分

        parseInt(3/2) 输出：1

可参考：JS 小数取整的几种方式_UserGuan的博客-CSDN博客_js小数取整

---

2、关于邮箱的校验相关（blur事件和表单自定义检验）

页面样式如下：

要求：

1、在失去焦点的时候将其他符号换成英文分号

html代码如下：

<el-input v-model.trim="createform.sendEmail"
         style="width:375px" placeholder="请输入邮箱地址,多个请用英文分号分割"
         @focus="emailVisible = false"
         @blur="emailBlur"></el-input>

js代码如下：

emailBlur(val) {
    // console.log(val.target.value);
    if(this.createform.sendEmail) {
        this.createform.sendEmail = this.createform.sendEmail.replace(/[\r\n\s]/g, '').replace(/[；，]/g, ';');
     }
},

2、利用el-form的表单校验方法

rules: {
    sendEmail: [
        { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change']},
        { required: true, validator: this.validatorEmail, trigger: 'blur' },
    ],
},

//校验邮箱格式
validatorEmail(rule, value, callback) {
    let myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    let array = value.split(";")
    if(array&&array.length) {
        array.map(item => {
            if(!myreg.test(item)) {
                callback(new Error('请填写正确邮箱地址'));
            }
        })
    }
    callback()
},

3、普通查询型写法（失去焦点和回车事件）

<el-input v-model="params.materialName"
    @keyup.enter.native="$event.target.blur()"
    @blur="loadData"
    @clear="loadData"
    clearable
    prefix-icon="el-icon-search" 
    placeholder="宝贝名称/宝贝ID" 
    style="width:250px"></el-input>

4、汇总一些校验要求

• replace(/[^\.\d]/g,'')         //替换掉与数字无关的字符

• replace(/[^0-9.]/g, '')       //只能输入数字和小数点

• replace(/^\./g, "")            //限制第一位不能是小数点

• replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")       //小数点只能输入两位

• //只能输入两位小数的完整写法
  e.target.value = e.target.value.replace(/^\./g,"");    //清除第一位是“.”的字符
  e.target.value = e.target.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
  e.target.value = e.target.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
  e.target.value = e.target.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
  if(e.target.value.indexOf(".")< 0 && e.target.value !=""){
  //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      e.target.value= parseFloat(e.target.value)
  }