当输入值与模式不匹配时更新状态

Question

当用户输入的值与模式不匹配时，我想更新状态“errorFlag”，如何才能验证输入值？

         const [errorFlag, setErrorFlag] = useState(false);
         <Input
              name='E-Mail-Address'
              type='email'
              pattern="^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$"
              errorMessage="* Invalid E-Mail-Address"
              onChange={setEmail1}
              error={email1 === ''}  
              required={true}     
          />

表单输入

import React from "react";

export interface InputProps {
  ....
 onChange?: (value: string) => void;
}

export class Input extends React.Component<InputProps, {
  value: string;
}> {
  constructor(props: InputProps) {
    super(props);
    this.state = { value: '' };
  }
  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: event.target.value });
    this.props.onChange?.(event.target.value);
  }
  render() {
    return (
      <div key="form-name" className="formrow" style={{...this.props.style}}>
        <input 
          type={this.props.type??"text"} placeholder={' '} id={id} className="forminput" pattern={this.props.pattern} onChange={this.onChange} required={this.props.required}
          />
        <span id="formInput-errorspan" className="errorSpan">{this.props.errorMessage}</span>
      </div>
    );
  }
}

Answer 1

您可以使用checkValidity 方法简单地返回真或假。

export default function App() {

  const [errorFlag, setErrorFlag] = useState(false);
  const [email, setEmail] = useState("");
  const onChange = (e) => {
    setErrorFlag(e.target.checkValidity());
    setEmail(e.target.value);
  };

  return (
    <div className="App">
      {errorFlag ? "Valid" : "Invalid"}
      <br />
      <Input
        name="E-Mail-Address"
        type="email"
        pattern="^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$"
        errorMessage="* Invalid E-Mail-Address"
        onChange={onChange}
        required={true}
      />
      {email}
    </div>
  );
}

输入

...
private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: event.target.value });
    this.props.onChange(event);
 }
 ...

Demo