react input 框进行动态脱敏

最新推荐文章于 2024-06-26 16:50:16 发布

原创最新推荐文章于 2024-06-26 16:50:16 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

本文记录了在React项目中实现身份证和手机号等敏感信息动态脱敏的方法。通过自定义组件，实现在input框中展示脱敏数据，并允许用户编辑原始数据。组件结合表单验证，提供了一个灵活的解决方案。

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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

在最近的项目中，需要前端对身份证和手机号等信息进行脱敏处理，但是在网上找到的大部分是静态脱敏，用了正则表达式等方法，不是我想要的。查到一篇用vue进行动态脱敏的相关博客。以此参考，在react中的动态脱敏进行个人记录。
参考文献：(https://blog.youkuaiyun.com/Twinkle_sone/article/details/125299163)

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果

这边的效果是原先从数据中获取到了身份证等数据，然后将数据在input框中进行脱敏并且可以对原先的数据进行修改。并且input框是在form 表单中的，需要进行表单验证。
在这里插入图片描述

二、功能实现

1.组件

 <Form.Item
    label="身份证号"
    name="idcard"
    rules={[
    {
      required: true,
      message: '请填入正确的身份证号',
      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
       }
      ]}
      >
      <div>
        <Input
         placeholder="请输入"
         suffix={idCardSuffix}
         onChange={this.handleChangeIdcard}
         value={idcardVisible ? idcard : idcard ? idcardShow : ''}
        />
       </div>
</Form.Item>

2.脱敏处理

代码如下（示例）：

 // 身份证加密处理
  handleChangeIdcard = (e) => {
    // 获取光标位置
    const ind = e.target.selectionStart - 1;
    // 真实值 未加密的
    let value = '';
    if (this.state.idcard) {
      value = this.state.idcard;
    }
    // 输入框获取的值
    const showVlue = e.target.value;
    const isAdd = showVlue.length > value.length;
    const num = Math.abs(value.length - showVlue.length);
    if (isAdd) {
      value =
        value.slice(0, ind - num + 1) +
        showVlue.slice(ind - num + 1, ind + 1) +
        value.slice(ind - num + 1);
    } else {
      value = value.slice(0, ind + 1) + value.slice(ind + num + 1);
    }
    const data = this.changeValue(value);
    this.setState({ idcard: value, idcardShow: data });
    console.log('value', value);
    this.formRef.current.setFieldsValue({ idcard: value });
  };
  changeValue = (str) => {
    let res = str;
    const len = str.length;
    let pre3 = '';
    let last4 = '';
    pre3 = str.slice(0, 3);
    last4 = str.slice(Math.max(len - 4, 3));
    const star = Math.max(0, len - 7);
    res = pre3 + '*'.repeat(star) + last4;
    return res;
  };