反应中的即时输入字段验证

Question

I have some input field in React, I want to do the instant validation for them:

1. Validate the Email Address is in the correct format. if not, show the error right next to the Email Address input field.

2. Validate Email Address and Verify Email Address match. if not, show the error right next to the Verify Email Address input field.

3. Validate that Name is not blank.

export default class DOB extends Component {
constructor() {
  super();
  this.state = {
    Year: "",
    Month: "",
    Day: "",
    YearFocused: false,
    MonthFocused: false,
    DayFocused: false,
    Valid: true
  };
}

render() {
  return (
    <div>
      <p>
        Email Address:
        <input type="text" value="" />
      </p>
      <p>
        Verify Email Address:
        <input type="text" value="" />
      </p>
      <p>
        Name:
        <input type="text" value="" />
      </p>
      <p>
        DOB (YYYY MM DD):
        <input className="Year" type="text" />
        <input className="Month" type="text" />
        <input className="Day" type="text" />
      </p>
      <p>
        <button>Submit</button>
      </p>
    </div>
  );
}
}

Answer 1

You could create a handle function that will deal with field changes and then you can manage your validations. Here's a quick example done with the Email and Verify Email fields . You can follow the same approach for the field "name".

Also, take a look at the Controlled Components docs. It will guide you to understand better how this can be done. As soon as you understand well you could look for a helper library, like formik .