Question

我无法让javascript工作！我需要Password和Re-Type Password字段，验证两者都有值，并且用户在两个字段中输入了相同的密码（即密码匹配）验证密码字段必须超过8个字符.I不希望使用警报功能，突出显示带有红色背景的未完成字段和每个未完成字段旁边的文本消息（红色），并显示错误消息。

我花了3天时间做这个!!任何帮助表示赞赏。

 function validate() {
   var fn =
     document.getElementById("FName");
   if (fn.value == "") {

     {
       document.getElementById("FName").style.borderColor = "red";
       return false;

     }
     return true;
   }

   function validate() {
     var sn =
       document.getElementById("SName");
     if (sn.value == "") {
       document.getElementById("SName").style.borderColor = "red";
       return false;

     }
     return true;
   }

   function validate() {
     var un =
       document.getElementById("UName");
     if (un.value == "") {
       document.getElementById("UName").style.borderColor = "red";
       return false;

     }
     return true;
   }

   function checkPass() {
     var pass = document.getElementById('pass');
     var c_pass = document.getElementById(' c_pass')
     var message = document.getElementById('confirmMessage');
     var goodColor = "#66cc66";
     var badColor = "#ff6666";

     if (pass.value == c_pass.value) {

       c_pass.style.backgroundColor = goodColor;
       message.style.color = goodColor;
       message.innerHTML = "Passwords Match!"
     } else {

       c_pass.style.backgroundColor = badColor;
       message.style.color = badColor;
       message.innerHTML = "Passwords Do Not Match!"

     }
     return true;
   }
 }

<body>
  <form action="Linkpage.html" id="myForm" method="post" name="myForm" onsubmit="return(validate())">
  </form>
  <br>
  <table>
    <tr>
      <td align="center" colspan="2"><span style="font-size:50px; color:blue;">Registration form</span>
      </td>
    </tr>
    <tr>
      <td align="center" colspan="2">Welcome to our website
        <br>please fill in <span style=" color:red;">all</span>
        <b><ins>fields</ins></b>
      </td>
    </tr>
    <tr>
      <td>First Name</td>
      <td>
        <input autofocus="" id="FName" placeholder="Enter First name " type="text">
      </td>
    </tr>
    <tr>
      <td>Last Name</td>
      <td>
        <input id="SName" placeholder="Enter Last name " type="text">
      </td>
    </tr>
    <tr>
      <td>Username</td>
      <td>
        <input id="UName" placeholder="Enter username " type "text">
      </td>
    </tr>
    <tr>
      <td>Age</td>
      <td>
        <input id="Age" placeholder="Enter age" type="text">
      </td>
    </tr>
    <tr>
      <td>Password</td>
      <td>
        <input id="pass" placeholder="Enter password " type="password">
      </td>
    </tr>
    <tr>
      <td>Confirm Password</td>
      <td>
        <input name="confirm password" id="c_pass" placeholder="Re-type your           password " type="password" onkeyup="checkPass(); return false;">
        <span id="confirmMessage" class="confirmMessage"></span>
      </td>
    </tr>
    <tr>
      <td rowspan="2">Gender</td>
      <td>
        <input name="mGender" type="radio" value="Male">Male</td>
    </tr>
    <tr>
      <td>
        <input name="fGender" type="radio" value="Female">Female</td>
    </tr>
    <tr>
      <td>Available</td>
      <td>
        <input id="checkbox" type="checkbox">
      </td>
    </tr>
    <tr>
      <td>Course</td>
      <td>
        <select>
          <option value="Mobile App">
            Mobile App
          </option>
          <option value="Cloud">
            Cloud
          </option>
          <option value="Software Development">
            Software Development
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="Comments">Comments</td>
      <td>
        <br>
        <textarea cols="30" name="Comments" placeholder="Type your comments here." rows="6"></textarea>
      </td>
    </tr>
    <tr>
      <td align="center" colspan="4" align="center">
        <input name="submit" onclick="return validate()" type="submit" value="Register" align="center" />
      </td>
    </tr>
  </table>
</body>

Answer 1

这里有几件事......

摆脱table，tr和td。您打开form然后关闭它。在input。

中添加所有form字段

然后不要添加三个全部称为validate的函数。你认为哪一个会被称为？而是将它们改为

function validateFname()

function validateSname()

function validateUname()

然后

使用===和!===代替==和!=。

我认为当你开始清理你的JavaScript和HTML时，事情会变得更有意义。

您是否尝试使用Chrome的调试程序或类似工具调试代码？

Answer 2

每次编写validate（）函数时，都会覆盖之前的实例。

我建议不要使用相同的函数名3次，写2个不同的函数 - matches（）和required（），每个函数都有不同的用途。

matches(field1, field2){
    return field1 == field2;
}

required(field){
    return field != false;
}

然后您可以将传递到这些函数中您正在验证的各个字段。

Answer 3

您的代码中存在很多错误，这对于初学者来说是很正常的。所以我所做的就是看看你的javascript。我不打算重新编写整个脚本，但我已经注释掉了你应该看一下的部分，并尝试一次评论一个部分，看看你的问题所在。但是我确实通过评论你的其他东西来获得你的匹配密码。现在试试吧。然后逐行删除注释，直到它再次停止工作。这将告诉您如何在脚本中找到其他错误。

<script>
    function checkPass(){
       var passValue = document.getElementById('pass').value;
       var c_passValue = document.getElementById('c_pass').value;
       var c_passID = document.getElementById('c_pass');
       var message = document.getElementById('confirmMessage');
       var goodColor = "#66cc66";
       var badColor = "#ff6666";


       if(passValue == c_passValue) {

          c_passID.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "Passwords Match!";

       } else {

          c_passID.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = "Passwords Do Not Match!";

       }

    }

</script>

好的，问题是你试图改变c_pass值而不是id本身的颜色。我重命名了你的变量来帮助你理解它为什么会破坏。同样，这仅适用于checkPass函数。如果您注释掉所有其他内容并且现在只使用此脚本，这将帮助您隔离checkPass函数并查看它是否有效。我希望这会有所帮助。

javascript验证帮助一个新手

3 个答案: