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; }
以上经本人验证有效
