表单验证技巧

import React, { useState } from 'react';

const App = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    address: '',
    paymentMethod: ''
  });

  const validateField = (name, value) => {
    switch (name) {
      case 'name':
        return value.length > 0;
      case 'email':
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
      case 'phone':
        return /^\d{10}$/.test(value);
      case 'address':
        return value.length > 5;
      case 'paymentMethod':
        return value.length > 0;
      default:
        return false;
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    let errors = {};
    Object.entries(formData).forEach(([key, value]) => {
      errors[key] = !validateField(key, value);
    });

    if (Object.values(errors).every(field => !field)) {
      alert('Form submitted successfully!');
    } else {
      alert('Please correct the errors in the form.');
    }
  };

  return (
    <div className="App">
      <div className="product-info">
        <h1>Product Information</h1>
        <p>Here is the information about the product.</p>
      </div>
      <form className="payer-data-form" onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          placeholder="Full Name"
          value={formData.name}
          onChange={handleChange}
        />
        <input
          type="email"
          name="email"
          placeholder="Email"
          value={formData.email}
          onChange={handleChange}
        />
        <input
          type="tel"
          name="phone"
          placeholder="Phone Number"
          value={formData.phone}
          onChange={handleChange}
        />
        <input
          type="text"
          name="address"
          placeholder="Address"
          value={formData.address}
          onChange={handleChange}
        />
        <select
          name="paymentMethod"
          value={formData.paymentMethod}
          onChange={handleChange}
        >
          <option value="">Select Payment Method</option>
          <option value="creditCard">Credit Card</option>
          <option value="paypal">PayPal</option>
        </select>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;