Validación de campos de entrada de formulario en React

Buscamos por todo el mundo online para así regalarte la respuesta a tu inquietud, si tienes alguna inquietud puedes dejarnos tu pregunta y respondemos sin falta.

Solución:

Está utilizando la propiedad de valor (significa componente controlado) de input elemento y actualizar el estado en onChange método, por lo que puede probar fácilmente esta expresión regular en onChange y actualice el estado solo cuando la entrada sea válida.

Me gusta esto:

handleChangeUserName(e)
   if(e.target.value.match("^[a-zA-Z ]*$") != null)
       this.setState(UserName: e.target.value);
   
 

Compruebe el código de trabajo:

class HelloWidget extends React.Component 
  
  constructor()
    super();
    this.state=UserName:''
    this.handleChangeUserName = this.handleChangeUserName.bind(this);
  
  
  handleChangeUserName(e)
    if(e.target.value.match("^[a-zA-Z ]*$")!=null) 
      this.setState(UserName: e.target.value);
    
  

  render()
    return(
      

         Name :   
        
      
    )
  

  
ReactDOM.render(, document.getElementById('container'));

Comprobar el jsfiddle para el ejemplo de trabajo: https://jsfiddle.net/uL4fj4qL/11/

Mira esto jsfiddle, Material-Ui snackbar agregado para mostrar el error, si el usuario intenta ingresar el valor incorrecto: https://jsfiddle.net/4zqwq1fj/

pattern="[A-Za-z]3" es una característica de HTML5.

Solución completa aquí: https://codepen.io/tkrotoff/pen/qypXWZ?editors=0010

Si solo desea utilizar la validación HTML5 predeterminada:

class FormValidate extends React.Component 
  state = 
    username: ''
  ;

  handleUsernameChange = e => 
    console.log('handleUsernameChange()');
    this.setState(
      username: e.target.value
    );
  

  handleSubmit = e => 
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  

  render() 
    return (
      

        

          Name
          
        

        Submit
      
    );
  

Si desea integrarse mejor con Bootstrap 4:

class FormNoValidate extends React.Component 
  state = 
    username: '',
    error: ''
  ;

  handleUsernameChange = e => 
    console.log('handleUsernameChange()');
    const target = e.target;
    this.setState(
      username: target.value,
      error: target.validationMessage
    );
  

  handleSubmit = e => 
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  

  render() 
    return (
      

        

          Name
          
          

            this.state.error
          
        

        Submit
      
    );
  

Si quieres ir más allá (más funciones, más control, mejor integración):

He escrito una biblioteca React muy simple para lidiar con la validación de formularios y que admite HTML5 attributes: https://github.com/tkrotoff/react-form-with-constraints

Ejemplos aquí: https://github.com/tkrotoff/react-form-with-constraints/blob/master/README.md#examples

con React hook, podemos crear hooks personalizados para facilitar mucho la validación. con tu ejemplo golpe. puedes fácilmente agregando register método desde el formulario de gancho de reacción: https://github.com/bluebill1049/react-hook-form

import React from 'react';
import useForm from 'react-hook-form';

function Test() 
  const  register, handleSubmit  = useForm();
  const onSubmit = data => console.log(data);

  return 
    

       Name :