Validando Inputs com regex em ReactJS

Passo 1: Configuração do Projeto ReactJS
Certifique-se de que você tenha o Node.js e o npm (ou yarn) instalados em seu sistema. Vamos começar criando um novo projeto ReactJS.
Crie um novo projeto ReactJS usando o Create React App:
bash
npx create-react-app react-form-validation

cd react-form-validation
Abra o projeto no seu editor de código preferido.
Passo 2: Criar um componente de formulário
Vamos criar um componente de formulário simples que inclua campos de email e senha.
Crie um novo arquivo chamado FormComponent.js no diretório src e adicione o seguinte conteúdo:
javascript
import React, { useState } from 'react';



const FormComponent = () => {
  

   const [email, setEmail] = useState('');
  
   const [password, setPassword] = useState('');

  
   const handleEmailChange = (e) => {
    
         setEmail(e.target.value);

   };

  
   const handlePasswordChange = (e) => {
    
         setPassword(e.target.value);

   };

  
   const handleFormSubmit = (e) => {

         e.preventDefault();
    
    // Add your form submission logic here

   };

  
   
   return (
    
       <form onSubmit={handleFormSubmit}>
      
         <div>
        
            <label>Email:</label>
        
            <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          placeholder="Enter your email"
        />
      
        </div>
      
        <div>
        
           <label>Password:</label>
        
           <input
          type="password"
          value={password}
          onChange={handlePasswordChange}
          placeholder="Enter your password"
        />
      
       </div>
      
       <button type="submit">Submit</button>
    
      </form>

 );

};


export default FormComponent;
Passo 3: Adicionar validação com Expressões Regulares (Regex)
Agora, vamos adicionar a validação usando expressões regulares para o campo de email e senha.
Adicione as expressões regulares para validação de email e senha no início do arquivo FormComponent.js:
javascript
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
Atualize a função handleFormSubmit para incluir a validação e exibir mensagens de erro:
javascript
const handleFormSubmit = (e) => {

    e.preventDefault();

  
    
    if (!emailRegex.test(email)) {
    
       alert('Please enter a valid email address.');
    
       return;

    }

  

    if (!passwordRegex.test(password)) {
    
        alert('Please enter a valid password (at least 8 characters, including at least one lowercase letter, one uppercase letter, and one number).');
    
        return;

    }

  
   // Add your form submission logic here

};
Passo 4: Integrar o componente de formulário ao aplicativo
Abra o arquivo src/App.js e substitua seu conteúdo pelo seguinte código para integrar o componente de formulário:
javascript
import React from 'react';

import FormComponent from './FormComponent';


const App = () => {
  
return (
    
    <div className="App">
      
       <h1>Form Validation Example</h1>
      
     <FormComponent />
    
    </div>

 );

};


export default App;
Passo 5: Executar o aplicativo
Execute o aplicativo ReactJS com o comando:
bash
npm start
Abra o navegador e acesse http://localhost:3000 para ver o aplicativo em ação.
Agora, você tem um componente de formulário ReactJS com validação de email e senha usando expressões regulares padrão. Certifique-se de adaptar o código conforme necessário para atender aos requisitos específicos do seu projeto.