文本輸入中的 URL 驗證

Question

如果用戶在單擊提交之前不小心在文本輸入上書寫，如何在文本輸入中驗證 url？

Answer 1

試試下面的代碼，這將為您工作

    function urlLocate() {
    var url = document.getElementById("url").value;
    var regexp = /^(?:(?: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*)?$/;
    if (url != "") {
        if (!regexp.test(url)) {
            alert("Please enter valid url.");
        } else {
            window.location.assign(url);
        }
    }
    else {
        alert("Please upload an image.");
    }
}

Answer 2

嘗試使用此功能驗證網址

function ValidURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
    '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locater
  if(!pattern.test(str)) {
    alert("Please enter a valid URL.");
    return false;
  } else {
    return true;
  }
}

Answer 3

嘗試使用此功能進行網址驗證。

function isUrlValid(userInput) {
    var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    if(res == null)
        return false;
    else
        return true;

Answer 4

使用form和<input type="url">進行驗證。 該表格只能使用有效值提交。

 $('form').on('submit', function(e){ e.preventDefault(); console.log('valid URL'); }); 

 <form> Input a URL: <input type="url" required><br> <input type="submit"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 5

我同意@NoobTW 和@Azer 使用<input type="url"

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url

沒有任何 JS 的示例：

需要一個 URL 前綴，但您可以自己編一個。 http:// 和 bonk:// 都將被接受為有效的 url 前綴。

<form>
    <input type="url" required />
    <input type="submit" value="Submit Now!">
</form>

通過要求所有 url 以 http:// 或 https:// 開頭的 URL 驗證

<form>
    <input type="url" pattern="https?://.+" required />
    <input type="submit" value="Submit Now!">
</form>

需要 https：

<form>
    <input type="url" pattern="https://.+" required />
    <input type="submit" value="Submit Now!">
</form>

https://html5-tutorial.net/form-validation/validating-urls/

帶有簡單的錯誤消息：

<form>
    <input type="url" pattern="https://.+" required title="Requires https://" />
    <input type="submit" value="Submit Now!">
</form>

如果您想替換默認 HTML5 驗證消息，您可以這樣做：

https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145#Replaceing%20the%20Default%20HTML5%20Validation%20Message

Answer 6

類型= “URL”

您可以給輸入type="url"進行如上所述的簡單驗證。

<input type="url" required>

請注意，如果需要有效的URL來提交表單，還應該給它提供required屬性。

模式屬性

如果要添加自己的定制驗證，也可以為輸入提供pattern屬性。 pattern屬性采用正則表達式模式作為其值，並在驗證時將其與輸入值匹配。 如果使用pattern屬性進行自己的自定義驗證，則無需使用“ url”輸入類型。 一個簡單的文本輸入也將起作用。

<input type="text" pattern=".*\.[a-z]{2,}$" required>

上面是一個過於簡化的正則表達式模式，該模式只能識別非常普通的url（例如example.com），並且不應用於任何認真的驗證。 但是您可以將模式更改為其他答案中建議的功能中使用的任何一種模式，或滿足您需求的其他一些模式。

兩者結合

<input type="url" pattern="https?:\/\/*" required>

上面是url輸入的簡單示例，其中已應用pattern屬性以使驗證更加嚴格。 這樣，輸入值必須通過url輸入字段的標准驗證，而且還必須通過要驗證的正則表達式模式。 在上面的示例中，URL必須以http：//或https：//開頭才能通過驗證。