html input输入值分段

最新推荐文章于 2021-06-30 08:04:23 发布

和芾°

最新推荐文章于 2021-06-30 08:04:23 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javaScript 正则文章标签： javaScript

本文链接：https://blog.youkuaiyun.com/weixin_43921521/article/details/97374475

javaScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

正则

2 篇文章

订阅专栏

本文介绍了如何在React中实现HTML input元素的值分段处理，包括身份证号、银行卡号和手机号的显示优化，提供了相应的运行截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、身份证号分段<-基于react->

//dom
<input
  placeholder="请输入开户身份证号"
  maxLength={21}
  onChange={onChangeIdcard}
  value={idcard}
>
</input>
//maxLength为(18+3个空格=21)


//react.js
const [idcard,setIdcard] = useState("");
function onChangeIdcard(e){
      let value = e.replace(/\D/g,'').slice(0,18);//去除空格
      let valLength=value.length
      switch (true) {
        case valLength>6&&valLength<11:
          value=`${value.slice(0,6)} ${value.slice(6)}`
          break;
        case valLength>10&&valLength<15:
          value=`${value.slice(0,6)} ${value.slice(6,10)} ${value.slice(10)}`
          break;
        case valLength>14:
          value=`${value.slice(0,6)} ${value.slice(6,10)} ${value.slice(10,14)} ${value.slice(14)}`
          break;
      
        default:
          break;
      }
      setIdcard(value);
    }

运行截图：
在这里插入图片描述

二、银行卡分段：

var a='8888888888888888'
console.log(a.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 '))

//8888 8888 8888 8888

三、手机号分段：<-基于react->

//dom
<input
  placeholder="请输入手机号"
  maxLength={13}
  onChange={onChangePhone}
  value={phone}
>
</input>
//maxLength为(18+3个空格=21)


//react.js
const [phone,setPhone] = useState("");
function onChangePhone(e){
      let value = e.replace(/\D/g,'').slice(0,11);//去除空格
      let valLength=value.length
      switch (true) {
        case valLength>3&&valLength<8:
          value=`${value.slice(0,3)} ${value.slice(3)}`
          break;
        case valLength>= 8:
          value=`${value.substr(0, 3)} ${value.substr(3, 4)} ${value..substr(7)}`
          break;
        default:
          break;
      }
      setPhone(value);
    }

运行截图:
在这里插入图片描述