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;ordisplay: 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";
   }
}