6

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

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

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

5
  • 3
    Никак, поле не может иметь одновременно 2 типа. Самый простой выход: все-таки сделать 2 поля для телефона и email'а. Посложнее: костылить свой валидатор 24 июл 2018 в 13:32
  • А есть ли такой плагин который может так сделать ?
    – Denis
    24 июл 2018 в 15:33
  • 1
    Не видел таких, думаю что нет 24 июл 2018 в 15:40
  • Спасибо за подсказку! Буду что то делать.
    – Denis
    24 июл 2018 в 16:01
  • @Denis >третий символ справа должен быть точкой Неверно, ибо такие зоны уже не редкость.
    – UModeL
    1 сен 2018 в 9:04

3 ответа 3

2

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

<form action="/action_page.php">
  Something: <input type="text" name="something" pattern="\+[0-9]{1,4}[0-9]{1,10}|(.*)@(.*)\.[a-z]{2,5}" title="" oninvalid="setCustomValidity('Пожалуйста, введите номер телефона или email')">
  <input type="submit">
</form>

1

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

1

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

Сначала проверяем на пустоту поля, затем проверяем в поле одни цифры или есть буквы, если есть буквы, то проверяем на правильность ввода 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 не должно быть пустым');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<button id="text">Test</button>
<div id="valid"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.