随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

el-input 电话号码输入时加上空格(344)

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() // 三元表达式,通过标题判断点击的是添加表单的提交还是修改表单的提交按钮
}
 
posted on   小虾米吖~  阅读(733)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示