如何在 react js 中实现表单验证？

Question

如标题所示，我需要按照以下代码进行表单验证。我之前尝试过多次使用 nodemailer 方法进行验证，并且它正在工作验证。现在由于一些问题我改变了我的方法，因此我尝试了另一种方法，但我无法实现。谁能帮帮我？

这是我的新联系表及其功能。

const Form = () => {
  function sendEmail(e) {
    e.preventDefault();
    emailjs
      .sendForm(
        'servxxxxxxxxxu',
        'tempxxxxxxxxxxxxa',
        e.target,
        'userxxxxxxxxxxxxxxxxxxxx'
      )
      .then((res) => {
        console.log(res);
      })
      .catch((err) => console.log(err));
  }
  return (
    <div className="Contact">
      <div className="wrapper">
        <h1>Contact Form</h1>
        <form onSubmit={sendEmail}>
          <input
            className="input-field"
            type="text"
            name="name"
            placeholder="Name"
          />

          <input
            className="input-field"
            type="text"
            name="user_email"
            placeholder="E-Mail"
          />

          <textarea name="message" rows="4" placeholder="Message" />
          <input type="submit" value="Send" />
        </form>
      </div>
    </div>
  );
};
export default Form;

这是我的旧验证，可能对你有帮助。

const initialState = {
  name: '',
  subject: '',
  email: '',
  message: '',
  sent: false,
  nameError: '',
  subjectError: '',
  emailError: '',
  messageError: '',
};

export default class Validation extends React.Component {
  state = initialState;

  handleName = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
  handleSubject = (e) => {
    this.setState({
      subject: e.target.value,
    });
  };
  handleEmail = (e) => {
    this.setState({
      email: e.target.value,
    });
  };
  handleMessage = (e) => {
    this.setState({
      message: e.target.value,
    });
  };
  validate = () => {
    let nameError = '';
    let subjectError = '';
    let emailError = '';
    let messageError = '';

    if (!this.state.name) {
      nameError = 'Name cannot be blank!';
    }
    if (!this.state.subject) {
      subjectError = 'Subject cannot be blank!';
    }
    if (this.state.message.length < 5) {
      messageError = 'Message cannot be less 5 character!';
    }

    if (!this.state.email) {
      emailError = 'E-mail cannot be blank!';
    } else if (typeof this.state.email !== 'undefined') {
      var mailformat = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (!mailformat.test(this.state.email)) {
        emailError = 'Incorrect e-Mail!';
      }
    }
    if (emailError || nameError || subjectError || messageError) {
      this.setState({ emailError, nameError, subjectError, messageError });
      return false;
    }

    return true;
  };

  handleSubmit = (e) => {
    e.preventDefault();

    const isValid = this.validate();
    if (isValid) {
      console.log(this.state);
      this.sendingMail();
      this.setState(initialState);
    }
  };

  sendingMail = () => {
    let data = {
      name: this.state.name,
      subject: this.state.subject,
      email: this.state.email,
      message: this.state.message,
    };

    axios
      .post('http://127.0.0.1:3001/api/form', data)
      .then((res) => {
        this.setState(
          {
            sent: true,
          },
          this.resetForm()
        );
      })
      .catch(() => {
        console.log('message not sent');
      });
  };

  resetForm = () => {
    this.setState({
      name: '',
      subject: '',
      email: '',
      message: '',
    });

    setTimeout(() => {
      this.setState({
        sent: false,
      });
    }, 3000);
  };
}

Answer 1

你可以将所有句柄方法合并到1中

 state = initialState;

  handleInput = (e , stateName) => {
    this.setState({ [`${stateName}`]: e.target.value})
  };
 

用这个 jsx

<input type="text" placeholder="name" onChange={(e)=>{this.handleInput('name' ,e)}}

验证

    var States = [ this.state.name, this.state.subject , this.state.email , this.state.message]
        States.forEach((stateKey)=>{
          if (!stateKey) this.setState({Error: `${stateKey} could not be blank`})
        })
    if (this.state.message.length < 5)this.setState({Error:'Message cannot be less 5 character!})
        
    if (this.state.Error) return false;
    return true