在react.js中使用输入字段验证提交表单

import React, { useState } from 'react';

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    // Perform form validation
    const isValidForm = validateForm();

    if (isValidForm) {
      // Submit the form data
      submitFormData();

      // Reset the form state
      setName('');
      setEmail('');
      setPassword('');
    }
  };

  const validateForm = () => {
    // Perform validation for each input field
    // You can use regular expressions or validation libraries here
    const isNameValid = name.trim() !== '';
    const isEmailValid = validateEmail(email);
    const isPasswordValid = password.length >= 6;

    // Update the isValid state based on the validation results
    setIsValid(isNameValid && isEmailValid && isPasswordValid);

    return isNameValid && isEmailValid && isPasswordValid;
  };

  const validateEmail = (email) => {
    // Email validation logic
    // Return true if valid, false otherwise
  };

  const submitFormData = () => {
    // Process the form data
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <br />
      <label>
        Password:
        <input type="password" value={password} onChange={handlePasswordChange} />
      </label>
      <br />
      <button type="submit" disabled={!isValid}>
        Submit
      </button>
    </form>
  );
};

export default MyForm;