Ввод HTML должен содержать определенную строку - PullRequest
0 голосов
/ 25 апреля 2019

У меня есть поле ввода, в котором будет записан ответ конечного пользователя. Скажите, что это ярлык Linkedin URL. Пользователь, который должен ввести URL-адрес linkedin, может ввести другой ввод (facebook.com/satyaram2k14), который не является недействительным. Итак, как можно проверить, если введенный URL содержит строку «linkedin.com» вместе с другим текстом. Окончательный URL-адрес должен быть «linkedin.com/satyaram2k14». Как я могу проверить этот шаблон на внешнем интерфейсе.

Ответы [ 2 ]

2 голосов
/ 25 апреля 2019

Существует несколько подходов:

  1. Положитесь на проверку формы HTML5 с помощью атрибутов required и pattern
  2. Проверка входного значения с помощью JavaScript при проверке формы
  3. При желании предоставить визуальную подсказку о (не) действительном состоянии содержимого поля

Проверка HTML5 работает в любом современном браузере и интегрируется в пользовательский интерфейс браузера (включая локализацию сообщений об ошибках). Но это не так гибко, и полезность сообщения об ошибке, которое появляется, когда шаблон не совпадает, варьируется от браузера к браузеру.

В любом случае, вы всегда должны проверять пользовательский ввод и на стороне сервера, потому что любую проверку клиента можно обойти.

Вот несколько примеров кода всех трех подходов. Все они используют шаблон RegEx ^https?://(www\.)?linkedin\.com, поэтому они разрешают протокол http или https и URL-адреса с или без "www.".

var form = document.getElementById('form');
var field = document.getElementById('url');
var fieldstatus = document.getElementById('fieldstatus');
var regExPattern = new RegExp('^https?://(www\.)?linkedin\.com', 'i');

// validation on form submit
form.addEventListener('submit', function(ev) {
  if (!regExPattern.test(field.value)) {
    ev.preventDefault();
    alert('The input value does not match the pattern!');
  }
});

// validation on input
field.addEventListener('input', function() {
  if (!regExPattern.test(field.value)) {
    fieldstatus.innerHTML = 'invalid';
  } else {
    fieldstatus.innerHTML = 'valid';
  }
});
<h1>HTML5 validation pattern</h1>
<form>
<input type="text" pattern="^https?://(www\.)?linkedin\.com" required /><br>
<input type="submit" />
</form>

<h1>Custom JavaScript validation</h1>
<form id="form">
<input type="text" id="url" /> <span id="fieldstatus">invalid</span><br>
<input type="submit" />
</form>
0 голосов
/ 25 апреля 2019

Одним из быстрых способов сделать это является использование атрибута pattern для input, например, так:

<input type='text' pattern='^linkedin\.com/'>

^linkedin\.com/ - это регулярное выражение, которое соответствует всем строкам, начинающимся с linkedin.com/.

Используя этот атрибут, браузер сам по себе будет принимать только такие строки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...