web-dev-qa-db-fra.com

Comment valider l'URL YouTube sur le côté client dans la zone de texte

Je dois créer une zone de texte qui vous permet uniquement de tube url pour les vidéos.

Pour gérer la validation côté serveur, j'utilise code ci-dessous

$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);

Je cherchais la même solution pour la validation côté client. J'ai trouvé environ <input type="url">ici mais il semble que ce soit uniquement pour les navigateurs html5.

Est-il possible de faire une validation côté client avec une zone de texte afin qu'elle soit compatible avec tous les navigateurs?

Merci

javascriptregexhtml5validationyoutube
23
Hitesh

Voici le code qui valide l'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
            }
        }
}

URL du violon: https://jsfiddle.net/cpjushnn/12/

55
Manik Arora

Voir cet exemple de travail:

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

Fiddle mis à jour: http://jsfiddle.net/3ouq9u3v/13/

22
Jitendra Pancholi

Échappez à toutes les barres obliques présentes dans votre expression régulière, puis placez l'expression régulière modifiée dans / délimiteur sans espace ni ligne de commentaire et vous n'avez pas besoin d'ajouter le modificateur x.

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

En combinant les réponses d'ici et quelques modifications, j'ai trouvé cette expression régulière:

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

Cela correspondra à n'importe quel format, mais ne correspondra pas si l'id dépasse 11 caractères. Également capable d'ajouter une balise de début de vidéo avec le "?" partie à la fin.

Vous pouvez le tester en le collant dans ceci

1
ForestG