Javascript 如何在文本框中的客户端验证youtube url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28735459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate youtube url in client side in text box
提问by Hitesh
I have to create a text box which only allows you tube url for videos.
我必须创建一个文本框，它只允许您输入视频的 url。
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">herebut it seems it is only for html5 browsers.
我正在寻找相同的客户端验证解决方案。我在<input type="url">这里找到了 ，但似乎仅适用于 html5 浏览器。
Is it possible to do client side validation with text box so that it will be compatible with all browser?
是否可以使用文本框进行客户端验证，以便与所有浏览器兼容？
Thanks
谢谢
回答by Manik Arora
Here is the code which validates the youtube url-
这是验证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 Url:https://jsfiddle.net/cpjushnn/12/
小提琴网址：https : //jsfiddle.net/cpjushnn/12/
回答by Jitendra Pancholi
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/
回答by ForestG
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
您可以通过将其粘贴到此来测试它
回答by Avinash Raj
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 xmodifier.
转义正则表达式中存在的所有正斜杠，然后将修改后的正则表达式放在/分隔符中，没有任何空格或注释行，您不需要添加x修饰符。
var re = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/watch\?v=([^&]+)/m;
