Jquery validator - проверка на email или телефона в одном поле input

#html #jquery #css #jquery_validation

Думаю использовать плагин JQuery validator чтобы не писать скрипт с нуля. По ТЗ задание
такое. 


  В поле можно будет ввести или номер телефона или mail. Соответственно
  нужна будет проверка: номер телефона должен состоять минимум из 10
  цифр (+ код страны). Если в значении будет присутствовать знак “@”, то
  мы будем идентифицировать его как эл.адрес. Перед знаком “@”  и после
  него должны быть расположены хотя бы по одному символу, а третий
  символ справа должен быть точкой. Если значение заполнено не будет,
  или будет заполнено не корректно, то будет выдаваться сообщение:
  “Заполните это поле” (для номера телефона) или “Укажите верный
  эл.адрес” (для эл.адреса).


Как сделать такую валидацию на JQuery Validator то есть на этом https://jqueryvalidation.org/
    

Ответы

Ответ 1

Да вам даже jquery и валидаторы не нужны. Если только вы не хотите писать какой-то
волшебный текст. Можно сделать через html pattern




  Something: 
  



Ответ 2

Вам необходимо реализовать и добавить своё правило в котором Вы будете проверять
значение элемента на соответствие или номеру телефона или eMail. Используйте для этого
jQuery.validator.addMethod().
Примеров масса: раз, два, три...


Ответ 3

Можно попробовать так

Сначала проверяем на пустоту поля, затем проверяем в поле одни цифры или есть буквы,
если есть буквы, то проверяем на правильность ввода e-mail, если только цифры, то проверяем
кол-во введенных цыфр



$(document).ready(function() {
  $('#text').click(function() {
    var val = $('#input').val();
    if(val != '') {
      if(/[^[0-9]/.test(val)){
        var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
        if(pattern.test(val)){
          $('#valid').text('E-mail введен верно');
        } else {
          $('#valid').text('Не верно введен e-mail');
        }
      } else {
        if(val.length >= 10) {
          $('#valid').text('Телефон введен верно');
        } else {
          $('#valid').text('Не верно введен номер телефона');
        }
      }
    } else {
      $('#valid').text('Поле input не должно быть пустым');
    }
  });
});