Вероятно, вам подойдёт html5 input[type=url]
<input type="url" />
RFC3986 определяет следующий паттерн для URI: ^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
Можно уточнить поле ввода своим паттерном (вы же не хотите всякие ftp://...
?)
Например:
<input type="url" pattern="https?://.+"/>
Или что-то посложнее:
<input type="url" pattern="^(?:https?://)?(?:www\.)?(?:[^\/\.]+\.)+[^\/\.]+"/>
Тест регулярки:
const reg = /^(?:https?:\/\/)?(?:www\.)?(?:[^\/\.]+\.)+[^\/\.]+/;
const samples = [
'http://www.example.com',
'https://example.com',
'www.example.com',
'example.com',
];
console.log(samples.map(sample => reg.test(sample)));
document.querySelector('button').addEventListener('click', () => {
console.log(document.querySelector('input').validity.valid)
});
<input type="url" pattern="^(?:https?://)?(?:www\.)?(?:[^\/\.]+\.)+[^\/\.]+"/> <!-- Регулярка изменена, иначе -->
<button>Check</button>
Использован ответ с enSO
^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
– vp_arth 23 апр '18 в 18:08site.com
иwww.site.com
могут быть совсем разными страницами? – Yaant 23 апр '18 в 18:11