表單輸入驗證ReactJS

我創建了一個表單來為客戶安排審計。我需要驗證欄位。對于 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>
    )
}
   

uj5u.com熱心網友回復：

使用狀態來跟蹤錯誤訊息。在提交表單或用戶更改輸入時執行驗證檢查，然后更新錯誤狀態。如果錯誤狀態不為空，則將其呈現到螢屏上。

您可以使用 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>
)

uj5u.com熱心網友回復：

這是一個簡單的例子：

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試試吧。

希望能幫到你！

標籤：反应 形式 验证

上一篇：AngularMatTable不會更新來自表單的資料

下一篇：PHP單頁表單處理