使用 javascript 获取并验证用户输入的 url [重复]答案

【问题标题】：Get and validate an user-input url with javascript [duplicate]使用 javascript 获取并验证用户输入的 url [重复]
【发布时间】：2017-12-15 10:03:55
【问题描述】：

我有一个表单来输入一个 url，并且必须检查它是否是一个带有 JavaScript 的 url。

Firefox 中的控制台没有显示代码中的任何错误（调试器也没有显示任何错误）但它没有运行。

我也尝试过不经验证就显示输入，但什么也没有

document.getElementById("link").addEventListener("click", linkfuction, false);

function linkfuction() {
  var link = document.getElementById("general-link").value;

  document.getElementById("1").innerhtml = "link";

  function ValidURL(link) {
    var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
    if (!regex.test(link)) {
      document.getElementById("1").innerhtml = "Enter a valid url";
      return false;
    } else {
      return true;
    }
  }

}

<div style="padding-bottom: 1rem;">
  <form><input type="text" id="general-link"><input type="button" id="link" value="Download"></form>
</div>
<div style="font-size: 1.5rem">
  <p id="1"></p>
</div>

【问题讨论】：

innerhtml 应该是innerHTML
你在哪里/如何调用你的ValidURL函数？您实际上并没有在您发布的代码中使用它。
innerhtml ► innerHTML 和 ValidURL 嵌套在 linkfuction 中并且从不触发。您没有看到错误的原因是在 JavaScript 中，如果属性不存在，例如 innerhtml，它将在分配期间创建。代码执行得很好，将innerhtml 与元素的链接值相加。您的嵌套函数 ValidURL 没有抛出错误，因为嵌入函数的语法是有效的，并且您已经嵌入但从未调用过不会触发错误。

标签： javascript forms validation input

【解决方案1】：

你没有调用你的ValidURL 函数。另外你打错了innerhtml 应该是innerHTML。

有关工作示例，请参见 sn-p。

document.getElementById("link").addEventListener("click", linkfuction, false);

function linkfuction(){
var link = document.getElementById("general-link").value;

document.getElementById("1").innerHTML = "link";

var isValid = ValidURL(link)

alert(isValid);

}

function ValidURL(link) {
    var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
    if(!regex.test(link)) {
        document.getElementById("1").innerHTML = "Enter a valid url";
      return false;
    } else {
        return true;
    }
}

<div style="padding-bottom: 1rem;"> 
  <form>
    <input type="text" id="general-link">
    <input type= "button" id="link" value="Download">
  </form>
</div>

<div style="font-size: 1.5rem">
  <p id="1"></p>
</div>

【讨论】：

我想这一行实际上应该使用link 变量而不是字符串：document.getElementById("1").innerHTML = "link";
谢谢，我已经解决了 ^^（感谢所有其他人^^）