react身份证回显

1. 处理身份证号的函数

function getAgeSexAndBirthdate(idCard: string): { sex: '男' | '女' | null; birthdate: Date | null } {
  if (idCard.length !== 18) {
    console.error('身份证号码必须是18位。');
    return { sex: null, birthdate: null };
  }
  // 提取出生年月日
  const year = parseInt(idCard.substring(6, 10));
  const month = parseInt(idCard.substring(10, 12));
  const day = parseInt(idCard.substring(12, 14));
  const birthDate = new Date(year, month - 1, day); // 注意月份是从0开始的
  // 判断性别
  const sex = parseInt(idCard.charAt(16)) % 2 === 0 ? '女' : '男';
  return { sex, birthdate: birthDate };
}

思路：

• 根据身份证号的第7到14位提取出生日期。
• 根据身份证号的第17位判断性别。

2. 监听身份证号变化的函数

function handleIdCardChange(e) {
  const newIdCard = e.target.value;
  const { sex: newSex, birthdate: newBirthdate } = getAgeSexAndBirthdate(newIdCard);
  if (newBirthdate != null) {
    const dateStart = newBirthdate;
    const birthdayHappy = `${dateStart.getFullYear()}-${String(dateStart.getMonth() + 1).padStart(2, '0')}-${String(dateStart.getDate()).padStart(2, '0')}`;
    setFormattedDateStart(birthdayHappy); // 生日输入框赋值
    console.log(newSex, formattedDateStart);
    setSex(newSex || '');
    setBirthdate(formattedDateStart || '');
  }
}

思路：

• 当身份证号输入框发生变化时触发此函数。
• 调用getAgeSexAndBirthdate函数计算出性别和出生日期。
• 将计算结果更新到对应的state中，并设置到表单项中。

3. 在表单中绑定身份证号输入框

<Form.Item name="idcard">
  <input
    type="text"
    defaultValue={form.getFieldValue('idcard')}
    onChange={handleIdCardChange} // 绑定身份证号变化事件
    required
    disabled
    style={{
      width: '100%',
      fontSize: '14px',
      borderRadius: '5px',
      border: '1px solid #ccc'
    }}
  />
</Form.Item>

思路：

• 在身份证号输入框上绑定onChange事件，当输入框内容改变时会触发handleIdCardChange函数。

4. 设置性别和生日到表单项

form.setFieldsValue({
  ...
  sex: sex, // 性别
  birthday: moment(birthdate), // 生日
  ...
});

思路：

• 在展示详情时，根据身份证号计算出的性别和生日设置到表单项中，以便回显。

这些代码片段共同实现了从身份证号自动解析出性别和出生日期，并将其回显到表单中的功能。