Validación doble de entrada de formulario Antd
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
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:En el ejemplo de código anterior, definimos un método personalizado
validateContact
que recibe un objeto derule
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 derules
del componenteForm.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.