javascript - 如何让我的 ajax 方法正确有效的文本框？

Question

document.getElementById("button1").addEventListener("click", mouseOver1);
 
functionmouseOver1(){
  document.getElementById("button1").style.color="red";
}

document.getElementById("button2").addEventListener("click",mouseOver);
functionmouseOver(){
  document.getElementById("button2").style.color="purple";
}

$("#button1").hover(function(){
  $(this).css('cursor','pointer');
});

$("#button2").hover(function(){
  $(this).css('cursor','pointer');
});

$(document).ready(function(){
  $('#button1').click(function(){
    $.ajax({
      data:{username:textbox1.val(),password:textbox2.val()
      },
      errors:function(){
        existing1-username-input-textbox:{
          required:"Youmustenteravalidexistinguseraccount.",
          minlength:"Yourusernamemustbeatleast10characterslong."
        },
        existing2-password-input-textbox:{
          required:"Youmustenteravalidpasswordassociatedwithanaccount.",
          minlength:"Yourusernamemustbeatleast10characterslong."
        }
      },
      success:function(){
        //usetheseanimatemethodsbelowifusernameandpasswordarecorrect:
        //$('#para1').animate({'left':'-105'});
        //$('.username-label').animate({'left':'-105%'});
        //$('.existing1-username-input-textbox').animate({'left':'-105%'});
        //$('.password-label').animate({'left':'-105%'});
        //$('.existing2-password-input-textbox').animate({'left':'-105%'});
        //$('#button1').animate({'left':'-105%'});
      }

    });
  });

introh1{
  font-family:'Cambria';
  font-size:16pt;
  font:bold;
  text-align:left;
}

.introp{
  font-family:'Calibri';
  font:italic;
  font-size:12pt;
  padding:0px690px0px20px;
  text-align:left;
}

.content{
  border:2pxsolid;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

#para1{
  padding:0px1050px0px20px;
}

#para2{
  padding:0px1099px0px20px;
}

.username-label,
.password-label{
  margin:10px0px0px300px;
  position:relative;
  top:-70px;
}

.existing1-username-input-textbox,
.existing2-password-input-textbox{
  top:-70px;
  position:relative;
}

#button1{
background-color:#add8e6;
  margin-left:390px;
  position:relative;
  top:-50px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:0px20px0px20px;
}

#button2{
background-color:#add8e6;
  margin-left:-200px;
  position:relative;
  top:-30px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:0px20px0px20px;
}

.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4{
  margin:0px0px0px300px;
  position:relative;
  top:-70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
  position:relative;
  top:-70px;
  margin-left:20px;
}

span{
  color:red;
}

        <h1>WelcometoCuyahogaCommunityCollegeStudentServicesOnline</h1>
      <p>CuyahogaCommunityCollegerecognizesstudents'rightstoaccesspersonalandacademicrecordsinaccordancewiththeFamilyEducationalRightsandPrivacyActof1974(FERPA)asamendedbyPublicLaw93-568.</p>
      </div>
      <br/>

      <divclass="content">
        <divclass="rowtop">
        <pid="para1">Alreadyhaveanaccountwithus?Returningusersmayloginbyenteringtheirsiteusernameandpassword.</p>
        <divclass="login">
          <labelclass="username-label"for="username-part1">Username</label>
          <inputclass="existing1-username-input-textbox"type="text"value="">
          <spanid="username_error1">*</span><br>
          <br>
          <labelclass="password-label"for="password-part2">Password</label>
          <inputclass="existing2-password-input-textbox"type="password"value="">
          <spanid="password_error2">*</span><br>
          <buttonid="button1">Login</button>
        </div>
      </div>
      <hr/>
      <divclass="rowbottom">
        <pid="para2">Newusers,pleasecreateanewaccountbyprovidinguswithsomebasicinformation.</p>
        <divclass="new_customers_info">
          <labelclass="Username-label1"for="new-user-name-part-1">Username</label>
          <inputclass="username-new-input-textbox"type="text"value=""><br/>
          <br/>
          <labelclass="Password-label2"for="password-new-part2">Password</label>
        <inputclass="password-new-input-textbox"type="password"value=""><br/>
        <br/>
        <labelclass="Email-label3"for="email-new">EmailAddress</label>
        <inputclass="email-new-input-textbox"type="email"value=""><br/>
        <br/>
        <labelclass="Repeat-Email-label4"for="repeat-new-email">RepeatEmailAddress</label>
        <inputclass="reenter-new-input-textbox"type="email"value="">

        <buttonid="button2">CreateAccount</button>
      </div>
    </div>
  </div>
  <br/>
  <footer>CuyahogaCommunityCollege</footer>
  <footer>700CarnegieAvenue,Cleveland,Ohio,44115</footer>
</div>
<scriptsrc="Home.js"></script>
</body>
</html>

大家好，

我正在尝试使用此 ajax 方法来验证上方框的输入文本字段，但如何才能使用它？
我做错了什么？

我希望它的工作方式是，如果用户输入了错误的用户名和密码，它会显示错误消息，并且不会将旧内容动画显示到左侧。
如何修复我的 ajax 方法？

Answer 1

只是为了确定这个问题...

nice chat discussion之后我们知道，您了解 Ajax 对于实际执行您期望的操作没有用。您了解了它的用途。

因此您根本不必使用 Ajax 来验证一个或多个文本框。
相反，使用 jQuery Validate plugin (或其他一些插件......有很多!谷歌“JavaScript 验证”)

一个很好的回答 我建议你看一下 this one ，很多用户都认为它«比他们的实际文档好得多»。

我认为这个插件是所有插件中使用最多的...至少是最知名的。

我还建议您阅读 https://en.wikipedia.org/wiki/Regular_expression ，这是一种有效地查找字符串部分的方法......它可以与上面的验证插件一起使用。

总而言之，这 super usefull tool测试正则表达式是必须的。

---

**--编辑--**
下一步是:[在 `submitHandler` 中使用 Ajax][5]