es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Validación doble de entrada de formulario Antd

05 Aug, 2023 Programación

Entonces, soy nuevo en AntD y necesito configurar una regla para el campo de entrada, de modo que pueda aceptar números de teléfono o correo electrónico.
Estoy intentando algo como esto, pero no funciona como debería:

<form.item name="contact-info" rules="{" [="" {required:true,="" message:="" 'ingrese="" información="" de="" contacto',="" type:="" 'email'},="" {required:true,="" message:="" '',="" type:="" 'number'}="" ]="" }="">
    <input placeholder='Teléfono o correo electrónico' classname="form-grid-input">
</form.item>

Actualización: El error que ocurre es que cuando ingreso un número de teléfono, aún no pasa la validación. Pero cuando ingreso un correo electrónico, todo está bien.
Captura de pantalla del problema: Enlace a la captura de pantalla

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para configurar una regla de validación para un campo de entrada de AntD que acepta tanto números de teléfono como correos electrónicos, puede usar el método validator de Antd. Aquí hay un ejemplo de fragmento de código:

    import { Form, Input } from 'antd';
import { validator } from 'antd/lib/form/Validator';

const validateContact = (rule, value) => {
  const emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/; // regex para la validación de correo electrónico
  const phoneRegex = /^\d{10}$/; // regex para la validación de número de teléfono

  if (value && !emailRegex.test(value) && !phoneRegex.test(value)) {
    return Promise.reject('¡Ingrese un correo electrónico o número de teléfono válido!');
  }
  return Promise.resolve();
};

<form.item name="contact-info" rules="{[" {="" required:="" true,="" message:="" '¡ingrese="" su="" correo="" electrónico="" o="" número="" de="" teléfono!',="" validator:="" validatecontact,="" utilizar="" el="" validador="" personalizado="" },="" ]}="">
  <input placeholder='Correo electrónico o teléfono'>
</form.item>

    En el ejemplo de código anterior, definimos un método personalizado validateContact que recibe un objeto de rule y el valor de entrada. En este método, primero definimos dos expresiones regulares, una para la validación del correo electrónico y otra para la validación del número de teléfono. Luego, verificamos si el valor de entrada no está vacío y no coincide con ninguna de las expresiones regulares de validación. Si no pasa ambas validaciones, devolvemos un Promise rechazado con un mensaje de error personalizado, de lo contrario, devolvemos un Promise resuelto.

    Luego, utilizamos este método de validación personalizado como la función validator en el array de rules del componente Form.Item de AntD. Esto activará la validación en el campo de entrada al enviar el formulario o cuando cambie el valor de entrada.

    Esto debería permitirle validar tanto números de teléfono como direcciones de correo electrónico en el mismo campo de entrada utilizando AntD.

Comments are closed.