資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 JavaScript 中驗證 URL 地址？
在本教程中，我們將討論如何在 JavaScript 中驗證 URL 地址。
URL 或統一資源定位符用於標識網際網路上的網頁、影像和影片。URL 是網站地址，用於傳輸檔案、傳送電子郵件等等。
URL 由協議、域名等等組成。URL 指示瀏覽器如何獲取資料以及從哪裡獲取資料。
我們在錨標籤或按鈕中使用 URL 將使用者導航到另一個位置。在使用 URL 之前，我們必須驗證其有效性。
URL 規則
URL 必須以 http:// 或 https:// 開頭。
URL 可能包含也可能不包含 www。
URL 不能是磁力連結或種子連結。
現在，讓我們看看驗證 URL 地址的方法。
使用正則表示式
正則表示式描述字元模式。我們使用這些模式來匹配某些文字。
使用者可以按照以下語法使用此方法。
語法
string.match(regExp); var pattern = new RegExp(regExp); pattern.test(string);
第一個語法匹配正則表示式。第二個語法測試 URL 模式。
引數
string − string 是要驗證的 URL。
regExp − 用於匹配 URL 的正則表示式。
pattern − 用於測試 URL 的正則表示式模式。
示例
此程式顯示多個正則表示式和正則表示式模式匹配來驗證 URL。
<html> <body> <h2> Validating the URL using <i> regular expressions </i> </h2> <div id = "urlValBtnWrap"> <button id = "urlValBtn"> Click Me </button> </div> <p id="urlValOut"></p> <script> var urlValBtnWrap = document.getElementById("urlValBtnWrap"); var urlValBtn = document.getElementById("urlValBtn"); var urlValOut = document.getElementById("urlValOut"); var urlRegStr = ""; urlValBtn.onclick = function(){ urlValBtnWrap.style.display = "none"; var regEx1 = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm; var url1 = 'https://www.test.com'; urlRegStr += url1 + ' is ' urlRegStr += regEx1.test(url1) + "<br><br>"; var regEx2 = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/; var url2 = 'http://www.test.com'; urlRegStr += url2 + ' is ' urlRegStr += regEx2.test(url2) + "<br><br>"; var url3 = 'www.test.com'; urlRegStr += url3 + ' is ' urlRegStr += regEx2.test(url3) + "<br><br>"; var regEx3 = /^((https?):\/\/)?([w|W]{3}\.)+[a-zA-Z0-9\-\.]{3,}\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/; var url4 = 'httpe://www.test.com'; urlRegStr += url4 + ' is ' urlRegStr += regEx3.test(url4) + "<br><br>"; var regEx4 = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g; var url5 = 'test'; urlRegStr += url5 + ' is ' urlRegStr += regEx4.test(url5) + "<br><br>"; var pattern = new RegExp('^(https?:\/\/)?'+ //protocol '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ //domain '((\d{1,3}\.){3}\d{1,3}))'+ //IP address '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ //port and path '(\?[;&a-z\d%_.~+=-]*)?'+ // query string '(\#[-a-z\d_]*)?$','i'); // fragment locator urlRegStr += "<b>new RegExp</b><br><br>"; var str1 = 'http:test'; urlRegStr += str1 + ' is ' urlRegStr += pattern.test(str1) + "<br><br>"; urlValOut.innerHTML = urlRegStr; }; </script> </body> </html>
使用 URL() 建構函式
URL() 建構函式返回一個新建立的 URL 物件。如果基本 URL 或結果 URL 無效，則建構函式會丟擲 TypeError。
使用者可以按照以下語法使用此方法。
語法
var url = new URL(urlStr); new URL(url, base); return url.protocol === 'http:' || url.protocol === 'https:';
前兩種語法建立新的 URL，帶或不帶基址。第二種語法用於檢查 URL 協議的有效性。
引數
url − url 是一個字串，表示絕對或相對 URL。相對 URL 必須有基址。對於絕對 URL，建構函式會忽略基址。
urlStr − 用於建立 URL 的字串。
base − base 是一個可選的字串引數。預設值為 undefined。
示例
在此程式中，URL 方法驗證 URL，並在無效 URL 的情況下返回型別錯誤。
<html> <body> <h2>Illustrating the valid and invalid URLs with <i>URL method</i></h2> <div id="urlValBtnWrap"> <button id="urlValBtn">Click Me</button> </div> <p id="urlValOut"></p> <script> var urlValBtnWrap = document.getElementById("urlValBtnWrap"); var urlValBtn = document.getElementById("urlValBtn"); var urlValOut = document.getElementById("urlValOut"); var urlStr = ""; urlValBtn.onclick = function(){ urlValBtnWrap.style.display = "none"; let str1 = 'https://teach.tuitor.com'; let url1 = new URL("/", str1); let url2 = new URL(str1); urlStr += "<b>Valid Urls</b><br><br>"; urlStr += "<b>Base</b> " + str1 + "<br><br>"; urlStr += "Url " + url1 + "<br><br>"; urlStr += "Url " + url2 + "<br><br>"; let url6 = new URL('/sub1/sub2', url1); urlStr += "<b>Base</b> " + url1 + "<br><br>"; urlStr += "Url " + url6 + "<br><br>"; let url3 = new URL('/sub1/sub2', url2); urlStr += "<b>Base</b> " + url2 + "<br><br>"; urlStr += "Url " + url3 + "<br><br>"; let url4 = new URL('sub1/sub2', url2); urlStr += "Url " + url4 + "<br><br>"; let url9 = new URL('http://www.test.com', url2); urlStr += "Url " + url9 + "<br><br>"; let url5 = new URL('/sub1/sub2', url3); urlStr += "<b>Base</b> " + url3 + "<br><br>"; urlStr += "Url " + url5 + "<br><br>"; let url7 = new URL('/sub1/sub2', "https://teach.tuitor.com/fr-FR/toto"); urlStr += "<b>Base</b> " + "Nothing" + "<br><br>"; urlStr += "Url " + url7 + "<br><br>"; let url8 = new URL('http://www.test.com', ); urlStr += "<b>Base</b> " + "Empty String" + "<br><br>"; urlStr += "Url " + url8 + "<br><br>"; let url10 = new URL("", "https://test.com/?query=1") urlStr += "Url " + url10 + "<br><br>"; //removes query arguments) let url11 = new URL("/a", "https://test.com/?query=1") urlStr += "Url " + url11 + "<br><br>"; //relative URLs let url12 = new URL("//test.com", "https://test.com") urlStr += "Url " + url12 + "<br><br>"; //relative URLs urlStr += "<b>TypeError Cases</b><br><br>"; try{ url13 = new URL('/sub1/sub2', ''); //'' is not a valid URL new URL('/sub1/sub2'); //'/sub1/sub2' is not a valid URL } catch(e){ urlStr += e + "<br><br>"; } urlStr += "<b>Check Validity</b><br><br>"; urlStr += "https://code.dev.com is " + isValidUrl('https://code.dev.com') + "<br><br>"; urlStr += 'test://code.dev.com is ' + isValidUrl('test://code.dev.com') + "<br><br>"; urlStr += 'Code Dev is ' + isValidUrl('Code Dev'); urlValOut.innerHTML = urlStr; }; function isValidUrl(string) { try { var url = new URL(string); return url.protocol === 'http:' || url.protocol === 'https:'; } catch (err) { return false; } } </script> </body> </html>
本教程介紹了兩種驗證 URL 的方法。第一種方法建議使用正則表示式匹配或模式測試。第二種方法是內建的 URL 方法。URL 方法很簡單，因為我們可以避免正則表示式中可能遺漏的測試用例。
更新於：2022年11月23日
2K+ 次瀏覽
廣告