React中number类型输入框的邮政编码表单验证问题

问题背景 #

我正在开发一个简单的客户信息收集表单，需要对邮政编码进行验证。我知道正则表达式是最简单的验证方式，但input类型为number时正则无法生效，且项目必须使用number类型。我查过自定义验证组件的相关内容，但实现太复杂，只需要在邮政编码位数不足5位或超过5位时显示错误提示。

现有代码 #

App.js

import React from 'react'
import { useState } from 'react'
import './App.css'
import FormInput from './FormInput/FormInput'

function App() {  

  const [values, setValues] = useState({
    name:"",
    email:"",
    zipcode:""
  });

  const inputs = [
    {
      id:1,
      name:"name",
      type:"text",
      placeholder:"Name",
      error: "至少输入3个字符",
      label:"姓名",
      pattern: "^.{3,25}$",
      required: true
    },
    {
      id:2,
      name:"email",
      type:"email",
      placeholder:"Email",
      error:"请输入有效的邮箱地址",
      label:"邮箱",
      required: true
    },
    {
      id:3,
      name:"zipcode",
      type:"number",
      placeholder:"Zipcode",
      error:"邮政编码必须是5位数字",
      label:"邮政编码",
      required: true
    }
  ]
  
  const handleSubmit = (e) => {
    e.preventDefault();
  }

  const onChange = (e) => {
    setValues({...values, [e.target.name]: e.target.value});
  }

  console.log(values);
  
  return (
    <div className='app'>
      <h2>客户信息表单</h2>
      <form onSubmit={handleSubmit}>
        {inputs.map((input) => (
          <FormInput key={input.id} {...input} 
          value={values[input.name]}
          onChange={onChange}/>
        ))}        
        <button>提交</button>
      </form>
    </div>
  )
}

export default App;

FormInput.js

import "./formInput.css";
import { useState } from "react";

const FormInput = (props) => {
    const [focused, setFocused] = useState(false);
    const { label, error, onChange, value, name, ...inputProps } = props;

    // 判断是否显示错误信息
    const shouldShowError = () => {
        // 邮政编码专属验证：值存在且长度不等于5
        if (name === 'zipcode') {
            return value && value.toString().length !== 5;
        }
        // 其他输入框的正则验证逻辑
        return focused && inputProps.required && inputProps.pattern && !inputProps.pattern.test(value);
    }

    const handleFocus = () => {
        setFocused(true);
    }

    const handleBlur = () => {
        setFocused(true);
    }

    return (
        <div className="formInput">            
            <label>{label}</label>
            <input 
                {...inputProps} 
                onChange={onChange}
                onFocus={handleFocus}
                onBlur={handleBlur}
                value={value}
            />
            {shouldShowError() && <span>{error}</span>}
        </div>
    )
}

export default FormInput;

关键修改点 #

1. 移除zipcode的pattern属性：number类型input不支持HTML5的pattern验证，直接删除该配置即可
2. 添加聚焦/失焦状态跟踪：确保用户与输入框交互后才显示错误，避免页面初始加载就出现提示
3. 邮政编码专属验证逻辑：将输入的数字转为字符串，检查长度是否为5，实现简单且满足需求
4. 条件显示错误提示：仅在验证不通过时渲染错误信息，保持页面整洁

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