el-input 电话号码输入时加上空格（344）

Posted 2021-03-15 lindablog

html:

<template v-for="(item,index) in children.formItem">

<el-input
  :ref="item.meta.system_id"
  v-model="temp[item.meta.valueKey]"
  clearable
  oninput="if(value.length>13)value=value.slice(0,13)"    oninput监控输入框的值（电话11位加上两个空格13位）
  :disabled="item.meta.disabled"
  :placeholder="item.meta.placeholder ? item.meta.placeholder : ‘请输入‘"
  @input="handlerPhone"
/>
</template>

js:

// 电话号码加入空格

handlerPhone(val) {
  if (val.length <= 13) {
    if (val.length > 3 && val.length < 7) {
      val = val.replace(/D/g, ‘‘).replace(/(d{3})(?=d)/g, ‘$1 ‘)
    } else if (val.length >= 7) {
      val = val.replace(/s/g, ‘-‘).replace(/[^d]/g, ‘ ‘).replace(/(d{4})(?=d)/g, ‘$1 ‘)
    }
    this.$set(this.temp, ‘tel‘, val)  temp: 表单； tel：表单项（电话号码的字段值）

  }
}

// 提交表单（提交修改表单和添加表单情况不一样，，尤其是修改表单，，点击编辑按钮获取该行的数据并赋值给表单，若是修改了电话号码再提交就会有空格，若是不修改电话直接提交就没有，
所以不管是否有空格，最后提交的表单都是没有空格的，，所以只需要判断是否有，有就删除，没有就不用删就好了，，若是没有空格还去删除空格就会报错
）

submitFn({ meta, data }) {
  /* 提交表单之前需要判断电话号码是否有空格，修改了电话就有，没修改电话直接提交就没有空格*/
  if (!(/^[u4e00-u9fa5_a-zA-Z0-9]+$/).test(this.temp[‘tel‘])) {
    this.temp[‘tel‘] = this.temp[‘tel‘].replace(/s/g, ‘‘)  // 判断是否有空格，有就删除
  }
  this.dialogStatus === ‘create‘ ? this.createData() : this.updateData() // 三元表达式，通过标题判断点击的是添加表单的提交还是修改表单的提交按钮
}