反应功能组件验证

问题描述

我是初学者。我正在使用带有钩子的表单来处理react函数组件。任何人都可以告诉我在无效或为空时如何对电子邮件文本进行验证，如果表单无效，则禁用继续按钮。

import React,{ useState } from "react";
const ForgotPassowrd = () => {
const [emailId,setemailId] = useState("");
const forgotPasswordClick = (event) => {};
return (
<div>
    <div className="NewPassword-form form_wrapper">
        <div className="form-body">
        <form action="#">
        <div>
        <div className="form-group">
                <label htmlFor="password">Email-Id</label>
                <div className="input-group">
                    <input type="text" className="form-control" value={emailId} onChange={(event)=> 
                    setemailId(event.target.value)}/>
                </div>
            </div>
            <button type="button" onClick={forgotPasswordClick} className="btn btn-lg 
            btn-block">Continue</button>
            </div>
          </form>
          </div>
        </div>
     </div>
    ); 
    };
   export default ForgotPassowrd;

解决方法

    **Try it.This may be helpfull for you! If you can any queries comment below.**
    
    
          const LoginV2 = ({}) => {
    // state
    
    const [loginForm,setLoginForm] = useState({
    email: undefined,password: undefined,emailValid: false,passwordValid: false,});
          const [error,setError] = useState({ email: undefined,password: undefined });

// state update        
          const handleLoginForm = (e) => {
            checkValidity(e.target.name,e.target.value);
            setLoginForm({ ...loginForm,[e.target.name]: e.target.value });
          };
// validation function        
          const checkValidity = (inputName,inputValue) => {
            switch (inputName) {
              case "email":
                let pattern = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
                loginForm.emailValid = pattern.test(inputValue);
                break;
              case "password":
                loginForm.passwordValid = inputValue.length >= 6;
                break;
              default:
                break;
            }
          };
 // form submit       
          const onSubmitLoginForm = () => {
            console.log(loginForm);
            if (!loginForm.emailValid) {
              setError({ ...error,email: "Invalid Email Address" });
            }
            if (!loginForm.passwordValid) {
              setError({
                ...error,password: "Password must be at least six characters long",});
            }
          };
        
          return (
            <div class="row">
              <div class="form">
                <div class="col span-1-of-2">
                  <div class="username">
                    <p class="login-para text-align-center">LOG IN VIA EMAIL</p>
                    <form method="post" action="#" class="login-form">
                      {error.email && (
                        <div class="alert alert-danger">
                          <p>
                            {" "}
                            <strong> {alertText} </strong> {error.email}
                          </p>
                        </div>
                      )}
        
                      {error.password && (
                        <div class="alert alert-danger">
                          <p>
                            {" "}
                            <strong> {alertText} </strong> {error.password}
                          </p>
                        </div>
                      )}
        
                      <div class="info-box">
                        {icon && <i class="fas fa-user-alt login-icon"></i>}
                        <input
                          type="text"
                          name="email"
                          placeholder="Your Email"
                          onChangeText={(e) => handleLoginForm(e)}
                          inputValue={loginForm.email}
                        />
                      </div>
        
                      <div class="info-box">
                        {icon && <i class="fas fa-user-alt login-icon"></i>}
                        <input
                          type="password"
                          name="password"
                          placeholder="Your Password"
                          onChangeText={(e) => handleLoginForm(e)}
                          inputValue={loginForm.password}
                        />
                      </div>
        
                      <div class="buttons">
                        <input type="checkbox" />
                        <label class="remember" for="#">
                          Remember me
                        </label>
                       <div class="form-btn-disabled" onClick={onSubmitLoginForm} 
                       > 
                         LOGIN NOW 
                       </div>
                      
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          );
        };
        export default LoginV2;

,

请尝试以下。我添加了内联注释以更好地理解。如有疑问，请评论您的查询。

// Regex to check valid email
const validEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g

import React,{ useState } from "react";
const ForgotPassowrd = () => {
const [emailId,setemailId] = useState("");
//State to disable/enable continue button
const [disableBtn,setDisableBtn] = useState(false);
const forgotPasswordClick = (event) => {};
const handleSubmit = e => {
    e.preventDefault();
    // Do whatever you want to do after you click submit button
}
const handleChange = e => {
    setemailId(event.target.value);
    setDisableBtn(validEmail.test(e.target.value));
}
return (
    <div>
    <div className="NewPassword-form form_wrapper">
        <div className="form-body">
        {/* Remove action and use onSubmit handler*/}
        <form onSubmit={handleSubmit}>
        <div>
        <div className="form-group">
                <label htmlFor="password">Email-Id</label>
                <div className="input-group">
                     {/* Introduced name attribute to help you with handleSubmit handler*/}
                    <input name="email" type="text" className="form-control" value={emailId} onChange={(event)=> 
                    setemailId(event.target.value)}/>
                </div>
            </div>
            <button onClick={forgotPasswordClick} className="btn btn-lg 
            btn-block" disabled={disableBtn}>Continue</button>
            </div>
          </form>
          </div>
        </div>
     </div>
    ); 
};
export default ForgotPassowrd;