个人中心
gpt4 book ai didi

javascript - 仅当使用 jquery 未正确输入用户名或密码时，如何才能显示错误消息？

转载 作者：太空宇宙 更新时间：2023-11-04 08:45:01 25 4
gpt4 key购买 nike 

document.getElementById("button1").addEventListener("click", mouseOver1);

function mouseOver1(){

   document.getElementById("button1").style.color = "red";

}


document.getElementById("button2").addEventListener("click", mouseOver); 


    function mouseOver(){ 

      document.getElementById("button2").style.color = "purple";
   }



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

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

 $('#button1').on('click', function () {
    if($(".existingUsername").get(0).value == "S0104675" && $(".existingPassword").get(0).value == "honor433")  
    { 

        $('#para1').animate({'left': '-100%'}); 
        $('.username-label').animate({'left': '-105%'}); 
        $('.existingUsername').animate({'left': '-105%'}); 
        $('.password-label').animate({'left': '-105%'}); 
        $('.existingPassword').animate({'left': '-105%'}); 
        $('#button1').animate({'left': '-105%'});   
             
    }else{

          document.getElementById("username_error1").innerHTML= "Please enter an existing valid username"; 
          document.getElementById("password_error2").innerHTML= "Please enter an existing valid password";  
                
       
     }

    }); 
});    











        

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

.intro p {
  font-family: 'Calibri';
  font: italic;
  font-size: 12pt;
  padding: 0px 690px 0px 20px;
  text-align: left;
}

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

#para1 {
  padding: 0px 1050px 0px 20px;
}

#para2 {
  padding: 0px 1099px 0px 20px;
}

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

.existingUsername, 
.existingPassword, 
#username_error1, 
#password_error2
{
    top: -70px; 
     position: relative;       
}

#button1{ 
     background-color: #add8e6;
     margin-left: 425px; 
     position: relative; 
     top: -70px; 
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius:10px;
  padding: 0px 20px 0px 20px; 
}

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

}


.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4 
{
  margin: 0px 0px 0px 300px;
  position: relative; 
  top: -70px; 
}
.newUsername, 
.newPassword, 
.newEmail, 
.repeatEmail{ 
  position: relative;
   top: -70px;
  margin-left: 20px; 

} 

span{

 color: red; 
 margin-left: 300px;
}
<html>

<head>

  <link href="Home.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title>Project</title>

</head>

<body>


<div class="container">
  <div class="intro">

    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

    <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  </div>
  <br/>

  <div class="content">
    <div class="row top">
      <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
      <div class="login">
        <label class="username-label" for="existingUsername">Username</label> 
         <input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>


        <label class="password-label" for="existingPassword">Password</label>
        <input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
        <button id="button1">Log in</button>
      </div>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>

      <div class= "new_customers_info">

        <label class="Username-label1" for="newUsername">Username</label>
        <input class="newUsername" type="text" value="">
         <br/><br/>

        <label class="Password-label2" for="newPassword">Password</label>
        <input class="newPassword" type="password" value="">
         <br/><br/>

        <label class="Email-label3" for="newEmail">Email Address</label>
         <input class="newEmail" type="email" value="" >
          <br/><br/>

        <label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
         <input class="repeatEmail" type="email" value="">

        <button id="button2">Create Account</button>
      </div>
    </div>
  </div>
   <br/>
  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
    <script src="Home.js"></script>
</body>
</html>

大家好，

我创建了一个允许我在我的网页上输入用户名和密码的网页(上部内容)，但我遇到的问题是如何让它仅在用户名不正确或如果密码不正确？现在，即使没有输入密码或密码不正确，它也会将两个文本框动画化。反之亦然，当用户名不正确或未输入时。我该如何解决这个问题？我是否需要使我的 if 语句更受限制？这是我的代码。

最佳答案

您可以在读取每个字段时即时填充错误，并设置一个变量来跟踪是否有任何错误。如果没有错误，请运行在提交表单时执行任何操作的代码。 

$("#button1").on("click", function() {
  var error = 0,
    usernameError = document.getElementById("username_error1"),
    passwordError = document.getElementById("password_error2");
  
  if ($(".existingUsername").get(0).value != "S0104675") {
    usernameError.innerHTML = "Please enter an existing valid username";
    error = 1;
  } else {
    usernameError.innerHTML = '';
  }
  if ($(".existingPassword").get(0).value != "honor433") {
    passwordError.innerHTML = "Please enter an existing valid password";
    error = 1;
  } else {
    passwordError.innerHTML = '';
  }
  if (error == 0) {
    console.log('form is ok');
    $("#para1").animate({ left: "-100%" });
    $(".username-label").animate({ left: "-105%" });
    $(".existingUsername").animate({ left: "-105%" });
    $(".password-label").animate({ left: "-105%" });
    $(".existingPassword").animate({ left: "-105%" });
    $("#button1").animate({ left: "-105%" });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>


<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password" /><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>

关于javascript - 仅当使用 jquery 未正确输入用户名或密码时，如何才能显示错误消息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43835618/

25 4 0
文章推荐： java - 如何从 Java 对象中提取数据？
文章推荐： C 代码在添加一分钟后无法显示正确的时间
文章推荐： c - 使用 setstate(3) 不会产生预期的随机数序列
文章推荐： javascript - 在 css 中评价星星不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com