ReactJS表单输入校验：审计安排表单clientNo字段及必填校验实现问题

前置调整说明 #

你当前代码里clientNo字段的type设置为number，数字输入框无法输入-字符，需要先改为text类型才能正常录入符合要求的客户编号。

实现步骤 #

1. 调整自定义useForm钩子，支持校验逻辑 #

先修改../components/useForm文件，新增错误状态管理、校验触发逻辑，参考实现如下：

import { useState } from 'react'

export function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues)
  const [errors, setErrors] = useState({})

  const handleInputChange = e => {
    const { name, value } = e.target
    setValues({
      ...values,
      [name]: value
    })
    // 输入时实时校验当前字段
    if (validate) {
      const fieldError = validate({ [name]: value }, name)
      setErrors(prev => ({ ...prev, [name]: fieldError }))
    }
  }

  const validateAll = () => {
    const validationErrors = validate ? validate(values) : {}
    setErrors(validationErrors)
    // 返回是否校验通过
    return Object.keys(validationErrors).length === 0
  }

  const handleClick = () => {
    const isValid = validateAll()
    if (!isValid) return
    // 校验通过后编写提交逻辑，比如调用接口保存数据
    console.log('表单校验通过，提交数据：', values)
  }

  return {
    values,
    setValues,
    handleInputChange,
    handleClick,
    errors
  }
}

export const Form = ({ children, ...props }) => (
  <form autoComplete="off" {...props}>
    {children}
  </form>
)

2. 在ScheduleAuditForm组件中编写校验规则，接入错误提示 #

修改scheduleAuditForm.js代码如下：

import { FormControl, FormControlLabel, Grid, makeStyles, RadioGroup,Radio, TextField} from "@material-ui/core";
import React, {useState, useEffect} from "react";
import { FormLabel } from "react-bootstrap";
import {useForm,Form} from "../components/useForm";
import Controls from "../components/controls/Controls";
import * as auditService from "../services/auditService"
    
const statusItems = [
    {id:'Confirmed', title:'Confirmed'},
    {id:'Not Initiated', title:'Not Initiated'},
    {id:'Confirmed - DD', title:'Confirmed - DD'},
    {id:'Confirmed - After DD', title:'Confirmed - DD'}

]
const keyAccountItems = [
    {id:'Yes', title:'Yes'},
    {id:'No', title:'No'}

]
const initialFValues = {
    id :0,
    clientNo:'',
    companyName:'',
    planner:'',
    status:'Confirmed',
    leadAuditor:'',
    startDate:new Date(),
    endDate:new Date(),
    cost:'',
    auditStandard:'',
    keyAccount:'Yes',
    auditType:'',
    confirmedMD:'',
    accreditation:'',
    eaCode:''
}

// 校验规则函数
const validate = (fieldValues = values, singleFieldName) => {
  const errors = {}
  // 全字段必填校验
  Object.keys(initialFValues).forEach(key => {
    // 单字段校验时只处理传入的字段
    if (singleFieldName && key !== singleFieldName) return
    const value = fieldValues[key] ?? values[key]
    // 日期类型默认有值无需校验，其余类型判空
    if (typeof value !== 'object' && !String(value).trim()) {
      errors[key] = '该字段为必填项'
    }
  })

  // clientNo单独校验
  if (!singleFieldName || singleFieldName === 'clientNo') {
    const clientNo = fieldValues.clientNo ?? values.clientNo
    if (clientNo) {
      // 长度至少3位才存在倒数第三位
      if (clientNo.length < 3 || clientNo.charAt(clientNo.length - 3) !== '-') {
        errors.clientNo = 'Incorrect input'
      }
    }
  }

  return errors
}
    
export default function ScheduleAuditForm(){    
    const{
        values,
        setValues,
        handleInputChange,
        handleClick,
        errors
    }=useForm(initialFValues, validate);
  
    return(
            <Form >
            <Grid container>
                <Grid item xs={4}>
                <Controls.Input
                    name="clientNo"
                    label="clientNo"
                    type="text"
                    value={values.clientNo}
                    onChange={handleInputChange}
                    error={errors.clientNo}
                    helperText={errors.clientNo}
                    />
                    <Controls.Input
                        name="companyName"
                        label="Company Name"
                        value={values.companyName}
                        onChange={handleInputChange}
                        error={errors.companyName}
                        helperText={errors.companyName}
                        />
                </Grid>
                <Grid item xs={4}>
                <Controls.Select
                    label='Planner'
                    name='planner'
                    value={values.planner}
                    onChange={handleInputChange}
                    options={auditService.getAuditCollection2()}
                    error={errors.planner}
                    helperText={errors.planner}
                    />    
                    </Grid>
                    {/* 其余表单项也按照上述格式，新增error和helperText属性绑定对应errors即可 */}
                    </Grid>  
                <div style={{marginLeft:'42px',marginBottom:'50px'}}>
                    <Controls.Button
                    type="button"
                    text="Submit" 
                    onClick={handleClick}
                    />
                </div>
            </Form>
    )
}

效果说明 #

• 输入时会实时校验当前字段，不符合规则立刻显示提示
• 点击提交按钮时会全量校验所有字段，有任意一项不符合则阻断提交
• clientNo字段会自动校验倒数第三位是否为-，不符合时返回要求的错误提示

内容的提问来源于stack exchange，提问作者Mohamed Shamik Mohamed Yunoos