当前位置： 文江博客话题详情

jQuery 粘贴输入的 URL 验证

发布于 2024-10-27 08:57:57 字数 1420 浏览 6 评论 0原文

我正在尝试确定粘贴的网址是否有效。我正在使用 bind() 函数来检测粘贴事件。我正在使用我在此处找到的正则表达式进行验证（该正则表达式有效并且暂时没问题）。我还附加了一些文本来告诉用户它是否是有效的网址。

当它在 bind() 内部时，唯一不起作用的是 URL 验证。不过，当放置在其外部时它会起作用。

JS：

 function validateURL(textval) {
  var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
  return urlregex.test(textval);
}

$(document).ready(function(){   

    // assign whatever is in the inputbox to a variable
    var url = $("#ent").val()

    //this is if they paste the url from somewhere
    $("#ent").bind('paste', function() {

        if(validateURL(url)) {
            $("#ent").css("background-color","green");
            $("#status").append("Valid URL");
            $("#submit").attr('disabled', 'disabled');
        }
    });

});

HTML：

<input type="text" name="ent" id="ent">
<input type="submit" name="submit" id="submit">
<div id="status"></div>
原文

I'm trying to determine if a pasted URL is valid. I'm using the bind() function to detect a paste event. I'm using a regex that I found on here for the validation (which works and is fine for the time being). I'm also appending some text to tell the user if it's a valid url or not.

The only thing that isn't working when it's inside the bind() is the URL validation. It works when placed outside of it, though.

JS:

 function validateURL(textval) {
  var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
  return urlregex.test(textval);
}

$(document).ready(function(){   

    // assign whatever is in the inputbox to a variable
    var url = $("#ent").val()

    //this is if they paste the url from somewhere
    $("#ent").bind('paste', function() {

        if(validateURL(url)) {
            $("#ent").css("background-color","green");
            $("#status").append("Valid URL");
            $("#submit").attr('disabled', 'disabled');
        }
    });

});

HTML:

<input type="text" name="ent" id="ent">
<input type="submit" name="submit" id="submit">
<div id="status"></div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

深居我梦 2024-11-03 08:57:57

你可以试试这个：

$(document).ready(function(){   
     function validateURL(textval) {
  var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
  return urlregex.test(textval);
}
    // assign whatever is in the inputbox to a variable


    //this is if they paste the url from somewhere
    $("#ent").live('input paste', function() {
        var url = $("#ent").val();
        if(validateURL(url)) {
            $("#ent").css("background-color","green");
            $("#status").append("Valid URL");
            $("#submit").attr('disabled', 'disabled');
        }
    });

});

jsfiddle

you can try this:

$(document).ready(function(){   
     function validateURL(textval) {
  var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
  return urlregex.test(textval);
}
    // assign whatever is in the inputbox to a variable


    //this is if they paste the url from somewhere
    $("#ent").live('input paste', function() {
        var url = $("#ent").val();
        if(validateURL(url)) {
            $("#ent").css("background-color","green");
            $("#status").append("Valid URL");
            $("#submit").attr('disabled', 'disabled');
        }
    });

});

jsfiddle

回复 原文
你不是我要的菜∠ 2024-11-03 08:57:57

嗯，你就不能写得稍微不同一点吗？我不确定 $("#ent") 是否存在于准备好的文档中，这可能会阻止该行为。

$(document).ready(function(){

    //this is if they paste the url from somewhere
    $("#ent").bind('paste', function() {
        // assign whatever is in the inputbox to a variable
        var that = $(this);
        if(validateURL(that.val())) {
            that.css("background-color","green");
            $("#status").append("Valid URL");
            $("#submit").attr('disabled', 'disabled');
        }
    });
});

Hmm, couldn't you write it slightly different? I'm not sure if the $("#ent") exists on document ready, that could stop the behaviour.

$(document).ready(function(){

    //this is if they paste the url from somewhere
    $("#ent").bind('paste', function() {
        // assign whatever is in the inputbox to a variable
        var that = $(this);
        if(validateURL(that.val())) {
            that.css("background-color","green");
            $("#status").append("Valid URL");
            $("#submit").attr('disabled', 'disabled');
        }
    });
});
回复 原文
惟欲睡 2024-11-03 08:57:57

用户blur 事件代替。

<script src="jquery.js"></script>
<script>
 function validateURL(textval) {
      var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");

  return urlregex.test(textval);
}

$(document).ready(function(){   

    $("#ent").bind('blur',
        function ()
        {
            if(validateURL($(this).val())){
                $('#result').html('Valid url')          
            }
            else{
                $('#result').html('Invalid url')
            }
        }    
    )
    });

</script>
<input type="text" name="ent" id="ent">
<input type="submit" name="submit" id="submit">
<label id="result"></label>
<div id="status"></div>

user blur event instead.

<script src="jquery.js"></script>
<script>
 function validateURL(textval) {
      var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");

  return urlregex.test(textval);
}

$(document).ready(function(){   

    $("#ent").bind('blur',
        function ()
        {
            if(validateURL($(this).val())){
                $('#result').html('Valid url')          
            }
            else{
                $('#result').html('Invalid url')
            }
        }    
    )
    });

</script>
<input type="text" name="ent" id="ent">
<input type="submit" name="submit" id="submit">
<label id="result"></label>
<div id="status"></div>
回复 原文
一刻暧昧 2024-11-03 08:57:57

我正在使用 .change 方法，因为 .live 方法不起作用......
当您按 Enter 或 Tab

$(document).ready(function() {

    function validateURL(textval) {
      var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
      return urlregex.test(textval);
    }

    $('#myurl').change(function(){
        var url = $("#myurl").val();
        if(!validateURL(url)) {
            $("#status").html("enter Valid URL");
        }
        else {
                $("#status").hide();
        }
    }); //event handler
}); //document.ready

jsfiddle时运行代码

I am using .change method because .live method not working...
code run when you hit enter or tab

$(document).ready(function() {

    function validateURL(textval) {
      var urlregex = new RegExp( "^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
      return urlregex.test(textval);
    }

    $('#myurl').change(function(){
        var url = $("#myurl").val();
        if(!validateURL(url)) {
            $("#status").html("enter Valid URL");
        }
        else {
                $("#status").hide();
        }
    }); //event handler
}); //document.ready

jsfiddle

回复 原文
~没有更多了~

关于作者

又爬满兰若

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文