Как проверить URL-адрес youtube на стороне клиента в текстовом поле

Мне нужно создать текстовое поле, которое разрешает вам только URL-адрес трубки для видео.

Чтобы обработать проверку на стороне сервера, я использую ниже кода

$rx = '~
    ^(?:https?://)?              # Optional protocol
     (?:www\.)?                  # Optional subdomain
     (?:youtube\.com|youtu\.be)  # Mandatory domain name
     /watch\?v=([^&]+)           # URI with video id as capture group 1
     ~x';

$has_match = preg_match($rx, $url, $matches);

Я искал одно и то же решение для проверки на стороне клиента. Я нашел около <input type="url"> здесь, но похоже, что это только для браузеров html5.

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

Спасибо

Ответы

Ответ 1

Вот код, который проверяет URL-адрес youtube -

function validateYouTubeUrl()
{
    var url = $('#youTubeUrl').val();
        if (url != undefined || url != '') {
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
            var match = url.match(regExp);
            if (match && match[2].length == 11) {
                // Do anything for being valid
                // if need to change the url to embed url then use below line
                $('#ytplayerSide').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?autoplay=0');
            }
            else {
                // Do anything for not being valid
            }
        }
}

Сводка скрипта: https://jsfiddle.net/cpjushnn/12/

Ответ 2

См. этот рабочий пример:

function matchYoutubeUrl(url) {
    var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    if(url.match(p)){
        return url.match(p)[1];
    }
    return false;
}

Обновлен скрипт: http://jsfiddle.net/3ouq9u3v/13/

Ответ 3

Сбросьте все косые черты, присутствующие в вашем регулярном выражении, а затем поместите измененное регулярное выражение в разделитель / без пробелов или строк комментариев, и вам не нужно добавлять модификатор x.

var re = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/watch\?v=([^&]+)/m;

Ответ 4

Объединив ответы отсюда и некоторые изменения, я придумал это регулярное выражение:

^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(\?\S*)?$

Это будет соответствовать любому формату, но будет несоответствовать, если идентификатор длиннее 11 символов. Также можно добавить начальный видеотег с помощью значка "?" часть в конце.

Вы можете проверить это, вставив в это

Ответ 5

Хорошо, и есть метод, который отвечает за автоматическую проверку URL-адреса youtube, без необходимости зависеть от события кнопки, которая выполняет проверку, что при копировании URL-адреса во входные данные автоматически проверяет меня, если это действительно URL-адрес youtube.?