javascript - 通过单击显示具有所需属性的提示

Question

例如我有一个输入:

<input type="text" id="username" required></input>

我还有一个 <button onclick="test_click()"></button> .

function test_click(){
    //
    // Here i check user input
    // 
}

如果用户输入错误，如何在点击按钮后显示错误提示？我需要执行 oninvalid事件，我该怎么做？

谢谢。

Answer 1

通常，我会使用隐藏的 dom 元素来提供这种反馈。具体使用哪些 dom 元素取决于您希望错误提示的显示方式。

例如，您可以有一个 <span>或 <img>直接位于 <input> 旁边内容设置为显示错误提示。最初，您希望将此元素的样式设置为包含 display: none;这样它就不会出现。然后在你的test_click()功能，您可以将样式更改为display: inline;或 display: block;等(适合您选择的元素)。

如果您使用的是 jQuery，它可能看起来像这样:

function test_click(){
   if (error_condition)
   {
      $("#errorElementID").css("display","inline");
   }
}

如果你不使用 jQuery，它可能看起来更像这样:

function test_click(){
   if (error_condition)
   {
      document.GetElementById("errorElementID").style.display = "inline";
   }
}