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 that you have read and understand our privacy policy and code of conduct.

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