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

I have to create a text box which only allows you tube url for videos.

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

To handle the validation in server side, I am using 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);

I was looking for the same solution for client side validation. I found about <input type="url"> here but it seems it is only for html5 browsers.

我正在为客户端验证寻找相同的解决方案。我在这里找到了，但它似乎只适用于html5浏览器。

Is it possible to do client side validation with text box so that it will be compatible with all browser?

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

Thanks

谢谢

4 个解决方案

#1

Here is the code which validates the youtube 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
            }
        }
}

Fiddle Url: https://jsfiddle.net/cpjushnn/12/

小提琴网址：https：//jsfiddle.net/cpjushnn/12/

#2

See this working example:

看这个工作示例：

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

Updated Fiddle: http://jsfiddle.net/3ouq9u3v/13/

更新小提琴：http：//jsfiddle.net/3ouq9u3v/13/

#3

Escape all the forward slashes present in your regex and then put the modified regex within / delimiter without any spaces or comment lines and you don't need to add x modifier.

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

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

#4

Combining the answers from here, and some modification, I came up with this regexp:

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

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

This will match any format, but will mismatch if the id is longer than 11 characters. Also able to add start video tag with the "?" part at the end.

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

You can test it by pasting it into this

你可以通过粘贴它来测试它

#1