使用jquery javascript验证youtube网址

时间:2012-09-16 13:06:36

标签: jquery regex validation youtube

我希望用户提交youtube网址。如果youtube链接正确,我想“动态”检查,如果检查成功,则将输入旁边的文本更改为OK。

我设法制作验证功能,但它不起作用。我做错了什么?

更新

它仍然不起作用,当URL不正确时应该说不正确,而在输入时URL正确时可以正常:

            $('form #youtube').bind("change keyup input", validYT());
        function validYT()
        {

            var url = $('form #youtube').val();
            var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
            if (url.match(p)) {
                $('#ytInfo').removeClass().addClass('fieldok ').text('OK');
                return true
            }
            else
            {
                $('#ytInfo').removeClass().addClass('fieldok ').text('NOT OK');
                return false
            }
        }

HTML:

youtubelink<BR>
<input type="text" name="youtube" id ="youtube" value="" /><div id="ytlInfo">dd</div>

2 个答案:

答案 0 :(得分:11)

function validYT(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
   return (url.match(p)) ? RegExp.$1 : false;
}

谢谢@eyecatchUp https://stackoverflow.com/a/10315969/1250044

<强>更新

function ytVidId(url) {
    var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
    return (url.match(p)) ? RegExp.$1 : false;
}

$('#youtube').bind("change keyup input", function() {
    var url = $(this).val();
    if (ytVidId(url) !== false) {
        $('#ytlInfo').addClass('fieldok');
    } else {
        $('#ytlInfo').removeClass('fieldok');
    }
});

Demo

答案 1 :(得分:0)

我使用Above方法

创建了一个方法
$(document).ready(function(){

    $.validator.addMethod("youtube", function(value, element) {
     var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
     return (value.match(p)) ? RegExp.$1 : false;
    }, "Enter correct URL");

    var validator = $("#frmAddvideo").validate({
        errorElement:'div',
        rules: {
            useravideo: {
                required: true,
                youtube: "#useravideo"
            }

        },
        messages: {
            useravideo: {
                required: "Enter user A video URL",
            }
        }
    });
});