验证我的用户名；同一窗口中出现错误的凭据错误消息

Question

我正在使用JavaScript进行验证。我的验证工作正常，但是我想在图像显示在同一页面上的输入错误时显示错误

无效输入时的所需方案

function validate() {
  var x = new String(document.forms["adminForm"]["adminName"].value);
  if (x != "zzzz")
    return false;
  else
    return true;
}

<script src="js/adminValidation.js" type="text/javascript"></script>
<img alt="Image Not Found" src="images/Header1.jpg" style="background-color: #fffffff; width: 100%; height: 100%">
<br>
<br>
<form name="adminForm" action="AdminChoice.html" method="post" onsubmit="return validate()">
  <center>
    <table>
      <th>
        <td> <b>Login</b> </td>
      </th>
      <tr></tr>
      <tr></tr>
      <tr></tr>
      <tr></tr>
      <tr>
        <td>Admin User Name</td>
        <td><input type="text" name="adminName"></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password"></td>
      </tr>
      <tr></tr>
      <tr></tr>
      <tr></tr>
      <tr>
        <td colspan="2">
          <center><input type="submit" value="Login"></center>
        </td>
      </tr>
    </table>
  </center>
</form>

Answer 1

一种非常简单的方案是仅包含一个具有所需文本反馈的元素，并根据验证是否成功来显示/隐藏该元素

这就像一个非常简单的示例，它不适合任何正确创建的验证系统，但它应该可以帮助您开始：D

function validate() {
  document.getElementById('ValidationFeedbackContainer').style.display = "none"; // hide before validation starts
  var x = new String(document.forms["adminForm"]["adminName"].value);
  if (x != "zzzz") {
    document.getElementById('ValidationFeedbackContainer').style.display = "block"; // show it
    return false;
  } else
    return true;
}
document.getElementById('ValidationFeedbackContainer').style.display = "none"; // hide before validation starts

<form name="adminForm" action="AdminChoice.html" method="post" onsubmit="return validate()">

  <table>
    <tr>
      <th> <b>Login</b> </th>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td>Admin User Name</td>
      <td><input type="text" name="adminName"></td>
    </tr>
    <tr>
      <td>Password</td>
      <td><input type="password"></td>
    </tr>
    <tr></tr>
    <tr id="ValidationFeedbackContainer" style="color:red;display:none;">
      <td>My custom asdasd error message goes in here!</td>
    </tr>
    <tr></tr>
    <tr>
      <td colspan="2">
        <center><input type="submit" value="Login"></center>
      </td>
    </tr>
  </table>
</form>

Answer 2

您需要在表单表中添加另一行，以在验证时显示/隐藏错误消息。

添加错误消息容器：

<span style="resize: none; height: 500px;">
   <b><u>Scanning PC:</b></u>
    // Tech Support //)
</span>

在验证时切换错误容器的类“隐藏”

<span style="resize: none; height: 500px;">@Model.Notes</span>

此处的代码示例：https://jsfiddle.net/poqxa59y/5/