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() // 三元表达式,通过标题判断点击的是添加表单的提交还是修改表单的提交按钮
}
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/12213041.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」