如何去除表单输入特殊字符？JavaScript输入掩码问题

你当前在InputMaskComponent的value属性中使用replace的方式无效，原因在于：输入掩码组件会基于设定的mask重新格式化传入的value，且onChange触发时传递的仍是带掩码格式的原始输入值，导致表单状态中存储的还是带区号、括号的内容，最终存入数据库时自然不符合需求。

以下是两种可行的解决思路：

方案一：在handleChange中实时处理输入值 #

修改表单的handleChange函数，针对手机号字段做清洗处理，确保存入表单状态的就是目标格式：

const handleChange = (e) => {
  const { name, value } = e.target;
  let processedValue = value;
  
  if (name === 'company_phone_no') {
    // 第一步：移除所有非数字字符
    processedValue = processedValue.replace(/\D/g, '');
    // 第二步：将开头的"60"替换为"0"（匹配你的示例需求）
    if (processedValue.startsWith('60')) {
      processedValue = '0' + processedValue.slice(2);
    }
  }

  setFormState(prev => ({ ...prev, [name]: processedValue }));
};

同时修改InputMaskComponent的value属性，直接传入表单状态的原始值即可：

<div className="mt-4">
   <InputMaskComponent
      id="company_phone_no"
      mask="+(60)999999999999"
      label="Company Phone Number"
      value={formState.company_phone_no || ''}
      variant="standard"
      onChange={handleChange}
   />
</div>

方案二：在表单提交时统一处理 #

如果不想修改handleChange逻辑，可以在提交表单的函数中对手机号做最终清洗：

const handleSubmit = (e) => {
  e.preventDefault();
  
  // 清洗手机号：先去非数字字符，再替换开头的60为0
  const cleanedPhone = (formState.company_phone_no || '')
    .replace(/\D/g, '')
    .replace(/^60/, '0');
  
  // 构造提交数据，替换清洗后的手机号
  const submitData = {
    ...formState,
    company_phone_no: cleanedPhone
  };

  // 调用接口将submitData提交至数据库
};

内容的提问来源于stack exchange，提问作者Ahmad Nasaiei