Question

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

要在服务器端处理验证，我使用的是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网址的代码 -

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/

Answer 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/

Answer 3

转义正则表达式中存在的所有正斜杠，然后将修改后的正则表达式放在/分隔符中，不带任何空格或注释行，并且您不需要添加x修饰符。

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

Answer 4

结合这里的答案和一些修改，我想出了这个正则表达式：

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

这将匹配任何格式，但如果id超过11个字符则不匹配。还可以使用“？”添加开始视频标记部分结束。

您可以通过粘贴into this

来测试它

如何在文本框中验证客户端的youtube网址

4 个答案: