一個小功能需要輸入視頻的鏈接，而視頻的鏈接一般都比較長，用戶使用也是直接從瀏覽器的地址欄直接賦值，導致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; }
以上經本人驗證有效