表单输入验证 ReactJS答案

【问题标题】：Form Input Validation ReactJS表单输入验证 ReactJS
【发布时间】：2021-10-18 12:55:06
【问题描述】：

我创建了一个表单来为客户安排审核。我需要验证字段。对于 clientNo 字段，输入的长度可以是无限的，但从末尾开始的第三个字符必须是“-”。例如 123456-01 或 1234567-02。如果不满足输入要求，则必须有反馈说“输入错误”。所有字段都必须填写，不能有任何空值。

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:''

}    
export default function ScheduleAuditForm(){    
    const{
        values,
        setValues,
        handleInputChange,
        handleClick
    }=useForm(initialFValues);
  
    return(
            <Form >
            <Grid container>
                <Grid item xs={4}>
                <Controls.Input
                    name="clientNo"
                    label="clientNo"
                    type={'number'}
                    value={values.clientNo}
                    onChange = {handleInputChange}

                    />
                    <Controls.Input
                        name="companyName"
                        label="Company Name"
                        value={values.companyName}
                        onChange = {handleInputChange}
                        />
                </Grid>
                <Grid item xs={4}>
                <Controls.Select
                    label='Planner'
                    name='planner'
                    value={values.planner}
                    onChange = {handleInputChange}
                    options={auditService.getAuditCollection2()}        
                    />    
                    </Grid>                                                                                                        
                    </Grid>  
                <div style={{marginLeft:'42px',marginBottom:'50px'}}>
                    <Controls.Button
                    type="button"
                    text="Submit" 
                    onClick = {handleClick}
                    />
                    {/* <Controls.Button
                    text="Reset" 
                    color="default"/> */}
                </div>
                </Grid>
            </Form>
    )
}

【问题讨论】：

标签： reactjs forms validation

【解决方案1】：

使用状态来跟踪错误消息。在提交表单或用户更改输入然后更新错误状态时执行验证检查。如果错误状态不为空，则将其渲染到屏幕上。

您可以使用 slice 来获取字符串的倒数第三个字符：

const [error, setError] = useState("")

const validationCheck = () => {
  if (values.clientId.slice(-3, -2) === '-') {
    handleClick()
  } else {
    setError('Client ID must end in -XX')
  }
}

return (
  <Form>
    ...
    {error !== "" && (<p>{error}</p>)}
    <Controls.Button
       type="button"
       text="Submit" 
       onClick = {validationCheck}
    />
  </Form>
)

【讨论】：

【解决方案2】：

这是一个简单的例子：

const {useState, useEffect} = React;

const DemoComponent = (props) => {
  
const [value, setValue] = useState("");
const [valid, setValid] = useState();
const handleValueOnChange = (e) => {
  const value = e.target.value;
  const regex = new RegExp("[0-9]+-[0-9]{2}$");
  setValid(value ? regex.test(value) : undefined);
  setValue(value);
};

return (
  <div>
    <div>
      <h4>Rule: </h4>
      <p>123456-01 ○</p>
      <p>1234567-1, -01, 12345, ...etc ×</p>
    </div>
    <hr />
    <div>
      <h4>Try here:</h4>
      <input value={value} onChange={handleValueOnChange} />
      {valid === false && <span> Incorrect input ×</span>}
    </div>
  </div>
);
}

ReactDOM.render(
  <DemoComponent />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

点击↑↑↑Run code snippet试试看。

希望能帮到你！

【讨论】：