如何使用正则表达式实现支持科学计数法的数字TextField验证

你之前的正则缺少对小数点和e后正号的支持，以下是覆盖所有需求的实现方案：

正确的正则表达式 #

/^[+-]?(?:0|(?:[1-9]\d*))(?:\.\d+)?(?:[eE][+-]?\d+)?$/

正则解析 #

• ^[+-]?：开头允许可选的正负号
• (?:0|(?:[1-9]\d*))：整数部分，要么是单独的0，要么是非零数字开头的整数（避免0123这类前置零的非法格式）
• (?:\.\d+)?：可选的小数部分，若存在小数点，后面必须跟至少一个数字（若需要支持123.这类末尾小数点的格式，可改为(?:\.\d*)?）
• (?:[eE][+-]?\d+)?：可选的科学计数法部分，支持e/E，后面允许可选的正负号，必须跟至少一个数字

可匹配示例 #

• 整数：123、-456、+789、0
• 小数：123.456、-0.123、+.789
• 科学计数法：1e3、-2E+4、+3.5e-6、0e0、123.456e789

不可匹配示例 #

• 前置零整数：0123
• 含非数字字符：12a3
• 不完整科学计数法：e123、12e
• 单独小数点：.

优化后的React组件实现 #

你之前用onKeyPress拦截输入的方式有缺陷：无法处理粘贴/拖放操作，且会阻止合法的中间输入（比如用户正在输入-123.e时，会被提前拦截）。建议改为在onChange中记录值，在失去焦点或提交时做验证：

const NumberField = (props) => {
  const { errorMessage, onValidate, ...restProps } = props;
  const validNumberRegex = /^[+-]?(?:0|(?:[1-9]\d*))(?:\.\d+)?(?:[eE][+-]?\d+)?$/;

  const handleChange = (e) => {
    const inputValue = e.target.value;
    // 把验证状态传递给父组件，由父组件决定何时显示错误
    if (onValidate) {
      const isValid = inputValue === '' || validNumberRegex.test(inputValue);
      onValidate(isValid);
    }
  };

  return (
    <TextField
      fullWidth
      onChange={handleChange}
      helperText={errorMessage}
      error={Boolean(errorMessage)}
      {...restProps}
    />
  );
};

使用说明 #

• 父组件可以通过onValidate获取实时验证状态，在失去焦点或表单提交时显示errorMessage
• 不阻止用户输入任何内容，保证输入流畅性，仅在最终验证不通过时提示错误

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