如何在javascript中验证url？_Javascript_Validation_Url

如何在javascript中验证url？

javascript validation url

如何在javascript中验证url？,javascript,validation,url,Javascript,Validation,Url,我有一个输入类型来输入url，还有一个选择标记来选择url类型。现在，我想检查所选类型和输入的url是否匹配，比如，用户不能输入instagram url并将url类型选择为facebook 所以我想验证一下。我尝试使用一个函数进行验证，验证url的效果很好，但我还想验证facebook和instagram是否为照片url或视频url 现在，它通常为facebook.com进行验证 <!DOCTYPE html> <html lang="en"> <head>

我有一个输入类型来输入url，还有一个选择标记来选择url类型。现在，我想检查所选类型和输入的url是否匹配，比如，用户不能输入instagram url并将url类型选择为facebook

所以我想验证一下。我尝试使用一个函数进行验证，验证url的效果很好，但我还想验证facebook和instagram是否为照片url或视频url

现在，它通常为facebook.com进行验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post</title>
</head>
<body>

<form class="postForm" id="postForm" method="post" action="addPost.php" enctype="multipart/form-data">

    <fieldset>
        <legend>Please add the details below </legend>
        <p>

        <div id="link" style="display: none">

        <p>
            <label for="url">URL (required)</label>
            <input id="url" type="url" name="url" required>
        </p>

        <p>
            <label for="urlType">Select Url Type :(required)</label>
            <select name="urlType" id="urlType">
                <option value="">Select Url Type...</option>
        <!--        <option value="0">Server Image</option>
                <option value="1">Server Video</option>-->
                <option value="2">YouTube Video</option>
                <option value="3">Vimeo Video</option>
                <option value="4">Facebook Image</option>
                <option value="5">Facebook Video</option>
                <option value="6">Instagram Image</option>
                <option value="7">Instagram Video</option>
                <option value="-1">Other</option>
            </select>
        </p>

        </div>

        <div id="filediv" style="display: none">

            Select file to upload:
            <br><br>
            <input name="file" type="file" id="fileToUpload"><br><br>

        </div>

        <p>
            <input type="hidden" name="action_type" id="action_type_id"/>
            <input type="hidden" name="id" id="p_id"/>

           <input type="submit" name="submit" id="submit" value="Submit">
        </p>
    </fieldset>

    <div class="result" id="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script>

        $('#postForm').validate({ // initialize the plugin
            rules: {
                title: {
                    required: true,
                    minlength : 2
                },
                url: {
                    required: true
                },
                desc: {
                    required : true,
                    minlength : 2
                },
                keywords : {
                    required : true,
                    minlength : 2
                },
                urlType :
                    {
                        required : true
                    },
                postType :
                    {
                        required : true
                    },
                category :
                    {
                        required : true
                    },
                 file :
                     {
                         required : true
                     }
            },
            submitHandler: function (form) { // for demo

                var url = document.getElementById('urlType').value;

                if(validate_url(document.getElementById('url').value) == 'facebook' && url != 4)
                {
                    alert('Please enter valid facebook image url or select valid url type.');
                }
                else if(validate_url(document.getElementById('url').value) == 'facebook' && url != 5)
                {
                    alert('Please enter valid facebook video url or select valid url type.');
                }
                else if(validate_url(document.getElementById('url').value) == 'instagram' && url != 6)
                {
                    alert('Please enter valid instagram image url or select valid url type.');
                }
                else if(validate_url(document.getElementById('url').value) == 'instagram' && url != 7)
                {
                    alert('Please enter valid instagram video url or select valid url type.');
                }
                else if(validate_url(document.getElementById('url').value) == 'vimeo' && url != 3)
                {
                    alert('Please enter valid vimeo video url or select valid url type.');
                }
                else if(validate_url(document.getElementById('url').value) == 'youtube' && url != 2)
                {
                    alert('Please enter valid youtube video url or select valid url type.');
                }
                else {
                    userAction('add');
                }
            }
        });


        function userAction(type,id){

            var statusArr = {add:"added",edit:"updated",delete:"deleted"};

            if (type == 'add') {

                $('#action_type_id').val(type);
                $('#p_id').val(id);
            }
            $.ajax({
                type: 'POST',
                url: 'addPost.php',
                data: $('#postForm').serialize(),
                success:function(report){
                    // replace data to report
                    $(".result").html(report);

                    $("#postForm").trigger('reset');
                }
            });
        }


        function validate_url(url)
        {
            if (/^(https?:\/\/)?((w{3}\.)?)facebook.com\/.*/i.test(url))
                return 'facebook';

            if (/^(https?:\/\/)?((w{3}\.)?)instagram.com\/.*/i.test(url))
                return 'instagram';

            if (/^(https?:\/\/)?((w{3}\.)?)vimeo.com\/.*/i.test(url))
                return 'vimeo';

            if (/^(https?:\/\/)?((w{3}\.)?)youtube.com\/.*/i.test(url))
                return 'youtube';

            return 'unknown';
        }

    </script>
</form>
</body>
</html>


邮递
请在下面添加详细信息


URL（必需）


选择Url类型：（必选）
选择Url类型。。。
YouTube视频
维梅奥视频
Facebook形象
Facebook视频
Instagram图像
Instagram视频
其他

选择要上载的文件：








$（'#postForm'）。验证（{//初始化插件
规则：{
标题：{
要求：正确，
最小长度：2
},
网址：{
必填项：true
},
描述：{
要求：正确，
最小长度：2
},
关键词：{
要求：正确，
最小长度：2
},
URL类型：
{
必填项：true
},
postType:
{
必填项：true
},
类别：
{
必填项：true
},
文件：
{
必填项：true
}
},
submitHandler:函数（表单）{//用于演示
var url=document.getElementById（'urlType'）。值；
if（validate_url（document.getElementById（'url'）.value）='facebook'&&url！=4）
{
警报（'请输入有效的facebook图像url或选择有效的url类型'）；
}
else if（validate_url（document.getElementById（'url'）.value）='facebook'&&url！=5）
{
警报（'请输入有效的facebook视频url或选择有效的url类型'）；
}
否则如果（验证url（document.getElementById（'url'）.value）='instagram'&&url！=6）
{
警报（'请输入有效的instagram图像url或选择有效的url类型'）；
}
否则如果（验证url（document.getElementById（'url'）.value）='instagram'&&url！=7）
{
警报（'请输入有效的instagram视频url或选择有效的url类型'）；
}
否则如果（验证url（document.getElementById（'url'）.value）='vimeo'&&url！=3）
{
警报（'请输入有效的vimeo视频url或选择有效的url类型'）；
}
否则如果（验证url（document.getElementById（'url'）.value）='youtube'&&url！=2）
{
警报（'请输入有效的youtube视频url或选择有效的url类型'）；
}
否则{
用户操作（“添加”）；
}
}
});
函数userAction（类型、id）{
var statusArr={add:“add”，edit:“updated”，delete:“deleted”}；
如果（类型==“添加”）{
$（'#action_type_id'）.val（type）；
$（'p#u id'）.val（id）；
}
$.ajax({
键入：“POST”，
url:'addPost.php'，
数据：$（'#postForm'）。序列化（），
成功：功能（报告）{
//替换要报告的数据
$（“.result”）.html（报告）；
$（“#postForm”）.trigger（'reset'）；
}
});
}
函数验证url（url）
{
如果（/^（https？：\/\/）（（w{3}\）？）facebook.com\/.*/i.test（url））
返回“facebook”；
如果（/^（https？：\/\/）（（w{3}\）？）instagram.com\/.*/i.test（url））
返回“instagram”；
如果（/^（https？：\/\/）（（w{3}\）？）vimeo.com\/.*/i.test（url））
返回“vimeo”；
如果（/^（https？：\/\/）（（w{3}\）？）youtube.com\/.*/i.test（url））
返回“youtube”；
返回“未知”；
}

我如何验证链接是否用于facebook图像、facebook视频或instagram图像、instagram视频

请帮忙。。谢谢。

我接着看了各种不同的url格式，下面是一些：

Facebook视频

https://video.fsnc1-1.fna.fbcdn.net/v/*.mp4

Facebook图片

https://scontent.fsnc1-1.fna.fbcdn.net/v/*.jpg

Instagram视频

https://instagram.fsnc1-1.fna.fbcdn.net/*.mp4

Instagram图像

https://instagram.fsnc1-1.fna.fbcdn.net/*.jpg

对于regex，如果您想查看它们是否由Facebook托管，您可以验证域是否为

fbcdn.net

。对于instagram，他们的所有资产似乎都以子域名

instagram.*.fbcdn.net

请注意，

fsnc1-1.fna

可能与CDN请求最近服务器的位置有关，这可能会发生变化。例如，在巴西进行网页测试时，会显示来自

sco的资产