使用 React js 和 Firebase 进行表单验证

Question

import React, { useState, useEffect } from "react"; 从'./firebase'导入{db}

//我想添加一些执行如下任务的验证

//1.检查用户输入的用户名少于 40 个字

//2.检查用户输入电子邮件（需要检查@符号等基本电子邮件信息）

//3.检查消息不应超过400字，

//所有字段都必须填写。

const Contact = () => {

const [senderName,setSenderName] = useState("");
const [senderEmail,setSenderEmail] = useState("");
const [senderMessage,setSenderMessage] = useState("");



const handleSubmitForm = (e) => {
    e.preventDefault();


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("");

};

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)} />
        </div>

        <div className="contact_us_input_box">
            <input type="text" placeholder="Enter your email"value={senderEmail}
             onChange={(e) => setSenderEmail(e.target.value)} />
        </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>
        </div>

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

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

 </>
)

}

导出默认联系人；

Answer 1

用于验证用户名中的字符范围

    function stringlength(inputtxt, maxlength)
{ 
var field = inputtxt.value; 
var mxlen = maxlength;

if(field.length> mxlen)
{ 
alert("Please input the userid between " +mnlen+ " and " +mxlen+ " characters");
return false;
}
}

如果您使用 Firebase，则可以使用 Firebase 身份验证进行登录，它会处理电子邮件格式 - 首先，定义 2 个额外的 useState 来显示错误， const [emailError, setEmailError] = useState('');

  const handleLogin = () => {

db
.auth()
.signInWithEmail(email)
.catch((err) =>{
  switch (err.code){
    case "auth/invalid-email":

      // console.log(err)
      setEmailError(err.message);
      break;
        
  }

  
})

}

为了限制标签中的字符，使用以下属性 <textarea maxlength="400">