Question

我正在尝试使用javascript进行表单验证。我想知道，不是innerHTML来显示我的错误消息，而是有另一种方式来显示我的错误消息。

以下是代码：

<form>
<p>
Email Address:<br>
<input type="text" id="email-address" name="email" style="width:200px;">
</p>
<p id="my-error-message-container" style="display:none; border:1px solid red; color:red; background-color:yellow; font-weight:bold; padding:5px; width:188px; position: relative;"></p>
<input type="submit" value="Submit Form" style="width:200px;" onclick="return ErrorCheck()">
</form>

<script type="text/javascript">
function RemoveErrorMessageFromPage()
{
   var IDofContainer = "my-error-message-container";
   document.getElementById(IDofContainer).innerHTML = "";
   document.getElementById(IDofContainer).style.display = "none";
}

function InsertErrorMessageIntoPage(content)
{
   var IDofContainer = "my-error-message-container";
   document.getElementById(IDofContainer).style.display = "";
   document.getElementById(IDofContainer).innerHTML = content;
}

function ErrorCheck()
{
   RemoveErrorMessageFromPage();
   var email = document.getElementById("email-address").value;
   if( ! email.length )
   {
      InsertErrorMessageIntoPage("The email address is required.");
      return false;
   }
   if( ! email.match(/\w@\w+\.\w/) )
   {
      InsertErrorMessageIntoPage("The email address appears to be invalid.");
      return false;
   }
   return true;
}
</script>

Answer 1

您的方法（具有用于错误消息的HMTL元素，并在发生错误/解决错误时适当设置其文本和可见性）是可以的。通常，textContent比innerHTML更为明确（您要设置文本，而不是设置为文本的HTML）。

textContent的{{3}}实际上比较了三个相似的属性textContent，innerHTML和innerText。

Answer 2

这是更快的替代方法（more）

err.insertAdjacentHTML('afterbegin','My error message');

.err { color: red }

<div id="err" class="err"></div>

什么是innerHTML

2 个答案: