JS blur事件驗證input輸入url有效性


  一個小功能需要輸入視頻的鏈接,而視頻的鏈接一般都比較長,用戶使用也是直接從瀏覽器的地址欄直接賦值,導致url字符串里面空格已被轉碼,使用如下進行驗證時瀏覽器卡死

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>驗證url</title>
<?php
header("Content-Type:text/html;charset=utf-8");
?>
<head>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<div class="main-wrap  edit-main">
        <div class="h3 table-item">視頻廣告信息內容</div>
        <table width="100%" cellspacing="1" cellpadding="0" class="table-edit">            
           <tr>
                <th width="120"><span class="red">*</span>內容鏈接:</th>
                <td>
                    <input type="text" name="sitelink" id="sitelink" size="50" maxlength="400" value="http://" />注:請填寫有效網址,必須是.swf格式的視頻鏈接
                    <div id="warn_div_sitelink"></div>
                </td>
            </tr>
        </table>
    </div>
<script type="text/javascript">
$(function(){
    $(function(){
        $("#title").blur(function(){
            if(jQuery("#title").val()==0)
            {
                slideinfo_check();
                return false;
            }else
            {
                setcheck_blur("title");
            }
        })
        $("#img_path").blur(function(){
            if(jQuery("#img_path").val()==0)
            {
                slideinfo_check();
                return false;
            }else
            {
                setcheck_blur("img_path");
            }
        })
        
        
        
        
        $("#sitelink").blur(function(){
            if(jQuery("#sitelink").val()==0 || jQuery("#sitelink").val()=='http://')
            {
                slideinfo_check();
                return false;
            }
            
            if(jQuery("#sitelink").val().match("http://")==null)
            {
                slideinfo_check();
                return false;
            }
            
            if(!IsURL(jQuery("#sitelink").val()))
            {
                slideinfo_check();
                return false;
            }
            setcheck_blur("sitelink");
        })
    })

    function setcheck_blur(obj)
    {
        $('#warn_div_'+obj).hide();
    }

    function setcheck(scrollTopvalue,obj,alertstr)
    {
        var scrollPos= $("html");
        if(navigator.userAgent.indexOf("Chrome")>0){
            scrollPos= $("body");
        }
        $(scrollPos).animate({ scrollTop : scrollTopvalue },{duration: 100 });
        jQuery('#'+obj).focus();
        $('#warn_div_'+obj).attr("class","form_warn");
        $('#warn_div_'+obj).show().html(alertstr);
        //$('#warn_div_'+obj).show().css({"display":'block',"color":'#FF0000'}).html(alertstr);
    }

    function slideinfo_check()
    {
        if(jQuery("#title").val()==0)
        {
            setcheck(0,"title","標題是必填項");
            return false;
        }
        
        if(jQuery("#img_path").val()==0)
        {
            setcheck(0,"img_path","圖片是必選項");
            return false;
        }
        if(jQuery("#sitelink").val()==0 || jQuery("#sitelink").val()=='http://')
        {
            setcheck(0,"sitelink","內容鏈接是必填項");
            return false;
        }
        if(jQuery("#sitelink").val().match("http://")==null)
        {
            setcheck(0,"sitelink","內容鏈接必須以“http://”開始");
            return false;
        }
        if(!IsURL(jQuery("#sitelink").val()))
        {
            setcheck(0,"sitelink","內容鏈接的規則有誤");
            return false;
        }
        return true;
    }

    function IsURL(urlString) {
        regExp = "^((https|http|ftp|rtsp|mms)?://)"       
            + "?(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?" //ftp的user@      
            + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184      
            + "|" // 允許IP和DOMAIN(域名)      
            + "([0-9a-zA-Z_!~*'()-]+\.)*" // 域名- www.      
            + "([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z]\." // 二級域名      
            + "[a-zA-Z]{2,6})" // first level domain- .com or .museum      
            + "(:[0-9]{1,4})?" // 端口- :80      
            + "((/?)|"       
            + "(/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+/?)$";  
            ///^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^ &<>\"\"])*$/;        
        if (urlString.match(regExp))
            return true;
        else
            return false;
    }
});
</script>
</body>
</html>

驗證瀏覽器直接卡死,會有如下提示

 

經不斷調試在url的正則驗證時無法驗證空格的轉碼,將驗證url js方法增加url轉碼即可,

function IsURL(urlString) {
        regExp = "^((https|http|ftp|rtsp|mms)?://)"       
            + "?(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?" //ftp的user@      
            + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184      
            + "|" // 允許IP和DOMAIN(域名)      
            + "([0-9a-zA-Z_!~*'()-]+\.)*" // 域名- www.      
            + "([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z]\." // 二級域名      
            + "[a-zA-Z]{2,6})" // first level domain- .com or .museum      
            + "(:[0-9]{1,4})?" // 端口- :80      
            + "((/?)|"       
            + "(/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+/?)$";  
            ///^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^ &<>\"\"])*$/;
        urlString = decodeURIComponent(urlString);
        if (urlString.match(regExp))
            return true;
        else
            return false;
    }

以上經本人驗證有效

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM