javascript - 如何在文本框中的客户端验证 youtube url

Question

我必须创建一个文本框，它只允许您输入视频的管 url。

为了在服务器端处理验证，我使用 below code

$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"> here但它似乎只适用于 html5 浏览器。

是否可以对文本框进行客户端验证，使其与所有浏览器兼容？

谢谢

Answer 1

这是验证 youtube url 的代码-

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
            }
        }
}

fiddle 网址: https://jsfiddle.net/cpjushnn/12/