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

type =“ url”

您可以给输入type="url"进行如上所述的简单验证。

<input type="url" required>

请注意，如果需要有效的URL来提交表单，还应该给它提供必填属性。

模式属性

如果要添加自己的自定义验证，还可以为输入提供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：// 开头才能通过验证。

文本输入中的URL验证

5 个答案:

type =“ url”

模式属性

两者结合