如何为React.js结合Firebase实现的表单添加指定校验规则？

我们只需要在原有代码基础上新增状态管理、校验逻辑、错误提示三部分内容即可完成需求，具体修改如下：

核心修改点 #

• 新增错误状态存储字段，用于记录各输入项的校验失败提示
• 新增独立校验函数，实现所有要求的校验规则
• 提交逻辑前置校验步骤，校验不通过则不触发Firebase提交
• 表单内新增错误提示展示，方便用户直观感知错误原因

完整修改后代码 #

import React, { useState } from "react";
import {db} from './firebase'

const Contact = () => {
  const [senderName,setSenderName] = useState("");
  const [senderEmail,setSenderEmail] = useState("");
  const [senderMessage,setSenderMessage] = useState("");
  // 新增错误状态管理
  const [errors, setErrors] = useState({});

  // 新增表单校验函数
  const validateForm = () => {
    const formErrors = {};
    // 用户名校验
    const trimmedName = senderName.trim();
    if (!trimmedName) {
      formErrors.senderName = "用户名不能为空";
    } else if (trimmedName.length > 40) {
      formErrors.senderName = "用户名长度不可超过40字符";
    }
    // 邮箱校验
    const trimmedEmail = senderEmail.trim();
    const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!trimmedEmail) {
      formErrors.senderEmail = "邮箱不能为空";
    } else if (!emailReg.test(trimmedEmail)) {
      formErrors.senderEmail = "邮箱格式不符合要求";
    }
    // 消息内容校验
    const trimmedMessage = senderMessage.trim();
    if (!trimmedMessage) {
      formErrors.senderMessage = "消息内容不能为空";
    } else if (trimmedMessage.length > 400) {
      formErrors.senderMessage = "消息内容长度不可超过400字符";
    }

    setErrors(formErrors);
    // 没有错误则返回校验通过
    return Object.keys(formErrors).length === 0;
  }

  const handleSubmitForm = (e) => {
      e.preventDefault();
      // 提交前先校验，校验不通过直接终止后续逻辑
      if (!validateForm()) return;

      db.collection('Contact_Form').add({
        User_name:senderName,
        User_email:senderEmail,
        User_message:senderMessage  
      })
      .then(()=>{
          alert("Message submitted")
      })
      .catch((error) => {
          alert(error.message);
      });

      setSenderName("");
      setSenderEmail("");
      setSenderMessage("");
      setErrors({});
  };

  return(
    <>
        <div className="contact_us_body">
        <div className="contact_us_container">
        <div className="contact_us_content">
           
        <div className="contact_us_right_side">
        <div className="text_heading">Send us a message</div>
        
        <form className="form" onSubmit={handleSubmitForm}  >
        

            <div className="contact_us_input_box">
                <input type="text" placeholder="Enter your name" value={senderName}
                onChange = {(e) => setSenderName(e.target.value)} />
                {/* 用户名错误提示 */}
                {errors.senderName && <p style={{color:'red',fontSize:'12px',margin:'5px 0 0 0'}}>{errors.senderName}</p>}
            </div>

            <div className="contact_us_input_box">
                <input type="text" placeholder="Enter your email"value={senderEmail}
                 onChange={(e) => setSenderEmail(e.target.value)} />
                {/* 邮箱错误提示 */}
                {errors.senderEmail && <p style={{color:'red',fontSize:'12px',margin:'5px 0 0 0'}}>{errors.senderEmail}</p>}
            </div>

            <div className="contact_us_input_box message-box">
                 <textarea name="messageText" id="" cols="30" rows="10"
                 placeholder="Type your Message"value={senderMessage}
                 onChange={(e) => setSenderMessage(e.target.value)} >
                 </textarea>
                {/* 消息错误提示 */}
                {errors.senderMessage && <p style={{color:'red',fontSize:'12px',margin:'5px 0 0 0'}}>{errors.senderMessage}</p>}
            </div>

            <div className="contact_us_button">
                <input type="submit" value="Send Now" />
            </div>

        </form>
                </div>
            </div>
        </div>
    </div>

     </>
  )
}

export default Contact;

内容的提问来源于stack exchange，提问作者Sam