用React js和Firebase进行表单验证

Question

从“React”导入React，{useState,useEffect}；从“./Firebase”导入{db}

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

//1。检查用户输入少于40个单词的用户名

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;
        
  }

  
})

}