URL格式驗證

admin發表於2019-03-29

首先說明一下，URL並不僅僅代表網址。

也可以是ftp或者資料庫地址等一切符合指定語法格式的地址。

更多關於URL內容可以參閱URL 結構分析一章節。

首先介紹一下HTML5之前如何實現URL格式驗證，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style> 
<script>
window.onload=()=>{
  let=isURL=(str_url)=> {// 驗證url
    var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
    + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
    + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
    + "|" // 允許IP和DOMAIN（域名）
    + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
    + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二級域名
    + "[a-z]{2,6})" // first level domain- .com or .museum
    + "(:[0-9]{1,4})?" // 埠- :80
    + "((/?)|" // a slash isn't required if there is no file name
    + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)[        DISCUZ_CODE_0        ]quot;;
    var re = new RegExp(strRegex);
    return re.test(str_url);
  }
  let url=document.getElementById("url");
  let obt=document.getElementById("bt");
  obt.onclick=()=>{
    if(!isURL(url.value)){
      alert("url格式錯誤");
    }
  }
}  
</script> 
</head>
<body>
<form action="#" method="post">
  <input type="text" id="url"/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上述程式碼實現了url格式正確性驗證功能，也可以看到程式碼比較繁瑣。

HTML5新增了type="url"的input元素，可以實現非常簡單的驗證。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
</style>  
</script>  
</head>
<body>
<form action="#" method="post">
  <input type="url" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

只要將type屬性值修改為"url"即可，提交表單就可以進行驗證格式。

相關文章