reactjs - 表单输入验证 ReactJS

Question

我创建了一个表格来为客户安排审核。我需要验证字段。对于 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>
    )
}
   

标签： reactjsformsvalidation

Answer 1

这是一个简单的例子：

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 ○&lt;/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试试看。

希望能帮到你！