Существует несколько подходов:
- Положитесь на проверку формы HTML5 с помощью атрибутов
required
и pattern
- Проверка входного значения с помощью JavaScript при проверке формы
- При желании предоставить визуальную подсказку о (не) действительном состоянии содержимого поля
Проверка 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>