有人可以帮我解决我的 javascript 中的 animation 问题吗？

Question

我正在处理注册表单，输入字段 animation 有问题，我想在用户输入数据时将输入字段底部边框的颜色更改为红色和图标颜色，这是不正确的for the requirements.This is halfly working with the icons,because they doesn't have javascript animation function,but not working with the fields border colors. 所以，当用户点击输入框时，我想播放 animation，并将边框设为绿色，当用户输入类似“a”字符时，边框为红色，如果数据与所有匹配要求，然后再次成为边框绿色。 我认为问题出在 animation 脚本的某处，在 271 行，因为如果我删除它，边框颜色变化开始工作良好，我认为两个 javascript 相互冲突，这只是对你的一点提示。 我对web开发没有太多经验。

这是代码： https://jsfiddle.net/hgf2346v/

 function Showfunction() { var eye = document.getElementById("eye"); var eye2 = document.getElementById("eye2"); var pass = document.getElementById("pass"); if (pass.type === "password") { pass.type = "text"; eye.style.display = "none"; eye2.style.display = "block"; } else { pass.type = "password"; eye2.style.display = "none"; eye.style.display = "block"; } } function hiddenscript() { var eye = document.getElementById("eye"); eye.style.display = "block"; } $(document).ready(function() { // set initially button state hidden // use keyup event on email field $("#email").keyup(function() { if (validateEmail()) { // if the email is validated // set input email border green $('#inputemail').css('border-bottom', 'solid 2px #38d39f'); $('#iconmail').css('color', '#38d39f'); $("#emailMsg").html("<p class='text-danger'></p>"); $(':input[type="submit"]').prop('disabled', false); // and set label } else { // if the email is not validated // set border red $('#inputemail').css('border-bottom', 'solid 2px #e50914'); $('#iconmail').css('color', '#e50914'); $("#emailMsg").html("<p class='text-danger'>Enter valid email.</p>"); $(':input[type="submit"]').prop('disabled', true); } }); $("#pass").keyup(function() { // check if (validatePassword()) { // set input password border green $('#inputpass').css('border-bottom', 'solid 2px #38d39f'); $('#iconpass').css('color', '#38d39f'); $("#passMsg").html("<p class='text-danger'></p>"); $(':input[type="submit"]').prop('disabled', false); //set passMsg } else { $('#inputpass').css('border-bottom', 'solid 2px #e50914'); $('#iconpass').css('color', '#e50914'); $("#passMsg").html("<p class='text-danger'>Password must contain at least 1 digit,<br>and need to contain at least 8 character.</p>"); $(':input[type="submit"]').prop('disabled', true); } }); $("#firstName").keyup(function() { // check if (validateFirstName()) { // set input password border green $('#inputfirstname').css('border-bottom', 'solid 2px #38d39f'); $('#iconfirstname').css('color', '#38d39f'); $("#firstMsg").html("<p class='text-danger'></p>"); $(':input[type="submit"]').prop('disabled', false); //set passMsg } else { $('#inputfirstname').css('border-bottom', 'solid 2px #e50914'); $('#iconfirstname').css('color', '#e50914'); $("#firstMsg").html("<p class='text-danger'>The first name must be at least 3 character long.</p>"); $(':input[type="submit"]').prop('disabled', true); } }); $("#lastName").keyup(function() { // check if (validateLastName()) { // set input password border green $('#inputlastname').css('border-bottom', 'solid 2px #38d39f'); $('#iconlastname').css('color', '#38d39f'); $("#lastMsg").html("<p class='text-danger'></p>"); $(':input[type="submit"]').prop('disabled', false); //set passMsg } else { $('#inputlastname').css('border-bottom', 'solid 2px #e50914'); $('#iconlastname').css('color', '#e50914'); $("#lastMsg").html("<p class='text-danger'>The last name must be at least 3 character long.</p>"); $(':input[type="submit"]').prop('disabled', true); } }); }); function validateEmail() { // get value of input email var email = $("#email").val(); // use reular expression var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ if (reg.test(email)) { return true; } else { return false; } } function validatePassword() { var pass = $("#pass").val(); var reg = /^(?=.*\d)(?=.*[az])[0-9a-zA-Z]{8,}$/ if (reg.test(pass)) { return true; } else { return false; } } function validateFirstName() { //get input password value var first = $("#firstName").val(); // check it s length if (first.length > 2) { return true; } else { return false; } } function validateLastName() { //get input password value var last = $("#lastName").val(); // check it s length if (last.length > 2) { return true; } else { return false; } } const inputs = document.querySelectorAll(".input"); function addcl() { let parent = this.parentNode.parentNode; parent.classList.add("focus"); } function remcl() { let parent = this.parentNode.parentNode; if (this.value == "") { parent.classList.remove("focus"); } } inputs.forEach(input => { input.addEventListener("focus", addcl); input.addEventListener("blur", remcl); });

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; height: 100%; padding: 0; margin: 0; }.container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 7rem; padding: 0 2rem; }.login-content { display: flex; justify-content: flex-start; align-items: center; text-align: center; }.container { grid-template-columns: none; } form { padding: 40px; background-color: #efefee; width: 460px; box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px; border-radius: 5px; } #eye { position: fixed; margin-left: 685px; margin-top: ; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 3; display: none; } #eye2 { position: fixed; margin-left: 685px; margin-top: ; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 3; display: none; }.login-content h2 { margin: 15px 0; color: #333; text-transform: uppercase; font-size: 2.9rem; margin-bottom: 105px; }.login-content.input-div { position: relative; display: grid; grid-template-columns: 7% 93%; margin: 45px 0; padding: 5px 0; border-bottom: 2px solid #d9d9d9; }.login-content.input-div.one { margin-top: 0; }.i { color: #333; display: flex; justify-content: center; align-items: center; }.ii { transition: .3s; }.input-div>div { position: relative; height: 45px; }.input-div>div>h5 { /* //Az inputnak a szövege(Username,password) */ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #333; font-size: 18px; transition: .3s; }.input-div:before, .input-div:after { content: ''; position: absolute; bottom: -2px; width: 0%; height: 2px; background-color: #38d39f; transition: .4s; }.input-div:before { right: 50%; }.input-div:after { left: 50%; }.input-div.focus:before, .input-div.focus:after { width: 50%; }.input-div.focus>div>h5 { top: -10px; font-size: 15px; }.input-div.focus>.i>i { color: #38d39f; }.input-div>div>input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; outline: none; background: none; padding: 0.5rem 0.7rem; font-size: 1.2rem; color: #555; font-family: 'poppins', sans-serif; }.input-div.pass { margin-bottom: 4px; } a { display: block; text-align: right; text-decoration: none; color: #333; font-size: 0.9rem; transition: .3s; } a:hover { color: #38d39f; text-decoration: underline; }.h6 { font-size: 16px; display: block; text-align: right; text-decoration: none; color: #333; font-size: 0.9rem; transition: .3s; }.pasw { width: 70%; }.btn { display: block; width: 100%; height: 50px; border-radius: 25px; outline: none; border: none; background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f); background-size: 200%; font-size: 1.2rem; color: #fff; font-family: 'Poppins', sans-serif; text-transform: uppercase; margin: 1rem 0; cursor: pointer; transition: .5s; }.btn:hover { background-position: right; } @media screen and (max-width: 1050px) {.container { grid-gap: 5rem; } } @media screen and (max-width: 1000px) { form { width: 420px; }.login-content h2 { font-size: 2.4rem; margin: 8px 0; margin-top: 5px; } #eye { margin-left: 545px; } #eye2 { margin-left: 545px; } } @media screen and (max-width: 900px) {.container { grid-template-columns: 1fr; }.img { display: none; }.wave { display: none; }.login-content { justify-content: center; } }.login-content { justify-content: center; }.text-danger { position: fixed; text-align: left; margin: 0; margin-top: 58; font-size: 14px; color: #e50914; }

 <div class="container"> <div class="login-content"> <form method="POST"> <h2 class="title">Sign Up</h2> <div class="input-div one" id="inputfirstname"> <div class="i"> <i class="fas fa-user" id="iconfirstname"></i> </div> <div class="div"> <h5>First Name</h5> <input type="text" id="firstName" name="firstName" autocomplete="off" class="input" required> <span id="firstMsg"></span> </div> </div> <div class="input-div lastname" id="inputlastname"> <div class="i"> <i class="fas fa-user" id="iconlastname"></i> </div> <div class="div"> <h5>Last Name</h5> <input type="text" id="lastName" name="lastName" autocomplete="off" class="input" required> <span id="lastMsg"></span> </div> </div> <div class="input-div email" id="inputemail"> <div class="i"> <i class="fas fa-envelope" id="iconmail"></i> </div> <div class="div"> <h5>Email address</h5> <input type="email" id="email" name="email" autocomplete="off" class="input" required> <span id="emailMsg"></span> </div> </div> <div class="input-div pass2" id="inputpass"> <div class="i"> <i class="fas fa-lock" id="iconpass"></i> <i class="fas fa-eye" id="eye" onclick="Showfunction()"></i> <i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i> </div> <div class="div"> <h5>Password</h5> <input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required> <span id="passMsg"></span> </div> </div> <a href="#">Already have account? Login in.</a> <input type="submit" name="submitButton" class="btn" id="btSubmit" value="Sign Up"> <h6>By clicking “SIGN UP” you agree the Terms of Use and Privacy Policy:</h6> </form> </div> </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

我建议你们将它保存到 index.html 和 style.css 在一个文件夹中，因为出于某种原因在 jsfiddle 上，输入字段的错误消息出现在错误的 Z4757FE07FD492A8BE0EA6A760EZ68 确切知道为什么。

抱歉英语知识不好。

Answer 1

您可以定义一个错误 class 来更改:before 和:after 元素的背景颜色，您可以在验证输入后添加或删除它们。

.error.input-div:before, .error.input-div:after {
  background-color: #e50914;
}

现场示例：

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; overflow: hidden; height: 100%; padding: 0; margin: 0; }.container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 7rem; padding: 0 2rem; }.login-content { display: flex; justify-content: flex-start; align-items: center; text-align: center; }.container { grid-template-columns: none; } form { padding: 40px; background-color: #efefee; width: 460px; box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px; border-radius: 5px; } #eye { position: fixed; margin-left: 685px; margin-top: ; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 3; display: none; } #eye2 { position: fixed; margin-left: 685px; margin-top: ; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 3; display: none; }.login-content h2 { margin: 15px 0; color: #333; text-transform: uppercase; font-size: 2.9rem; margin-bottom: 105px; }.login-content.input-div { position: relative; display: grid; grid-template-columns: 7% 93%; margin: 45px 0; padding: 5px 0; border-bottom: 2px solid #d9d9d9; }.login-content.input-div.one { margin-top: 0; }.i { color: #333; display: flex; justify-content: center; align-items: center; }.ii { transition: .3s; }.input-div>div { position: relative; height: 45px; }.input-div>div>h5 { /* //Az inputnak a szövege(Username,password) */ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #333; font-size: 18px; transition: .3s; }.input-div:before, .input-div:after { content: ''; position: absolute; bottom: -2px; width: 0%; height: 2px; background-color: #38d39f; transition: .4s; }.error.input-div:before, .error.input-div:after { background-color: #e50914; }.input-div:before { right: 50%; }.input-div:after { left: 50%; }.input-div.focus:before, .input-div.focus:after { width: 50%; }.input-div.focus>div>h5 { top: -10px; font-size: 15px; }.input-div.focus>.i>i { color: #38d39f; }.input-div>div>input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; outline: none; background: none; padding: 0.5rem 0.7rem; font-size: 1.2rem; color: #555; font-family: 'poppins', sans-serif; }.input-div.pass { margin-bottom: 4px; } a { display: block; text-align: right; text-decoration: none; color: #333; font-size: 0.9rem; transition: .3s; } a:hover { color: #38d39f; text-decoration: underline; }.h6 { font-size: 16px; display: block; text-align: right; text-decoration: none; color: #333; font-size: 0.9rem; transition: .3s; }.pasw { width: 70%; }.btn { display: block; width: 100%; height: 50px; border-radius: 25px; outline: none; border: none; background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f); background-size: 200%; font-size: 1.2rem; color: #fff; font-family: 'Poppins', sans-serif; text-transform: uppercase; margin: 1rem 0; cursor: pointer; transition: .5s; }.btn:hover { background-position: right; } @media screen and (max-width: 1050px) {.container { grid-gap: 5rem; } } @media screen and (max-width: 1000px) { form { width: 420px; }.login-content h2 { font-size: 2.4rem; margin: 8px 0; margin-top: 5px; } #eye { margin-left: 545px; } #eye2 { margin-left: 545px; } } @media screen and (max-width: 900px) {.container { grid-template-columns: 1fr; }.img { display: none; }.wave { display: none; }.login-content { justify-content: center; } }.login-content { justify-content: center; }.text-danger { position: fixed; text-align: left; margin: 0; margin-top: 58; font-size: 14px; color: #e50914; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <.DOCTYPE html> <html> <script> function Showfunction() { var eye = document;getElementById("eye"). var eye2 = document;getElementById("eye2"). var pass = document;getElementById("pass"). if (pass.type === "password") { pass;type = "text". eye.style;display = "none". eye2.style;display = "block". } else { pass;type = "password". eye2.style;display = "none". eye.style;display = "block". } } function hiddenscript() { var eye = document;getElementById("eye"). eye.style;display = "block". } </script> <script> $(document).ready(function() { // set initially button state hidden // use keyup event on email field $("#email").keyup(function() { if (validateEmail()) { // if the email is validated // set input email border green $('#inputemail'),css('border-bottom'. 'solid 2px #38d39f');removeClass('error'). $('#iconmail'),css('color'; '#38d39f'). $("#emailMsg");html("<p class='text-danger'></p>"): $('.input[type="submit"]'),prop('disabled'; false). // and set label } else { // if the email is not validated // set border red $('#inputemail'),css('border-bottom'. 'solid 2px #e50914');addClass('error'). $('#iconmail'),css('color'; '#e50914'). $("#emailMsg").html("<p class='text-danger'>Enter valid email;</p>"): $('.input[type="submit"]'),prop('disabled'; true); } }). $("#pass").keyup(function() { // check if (validatePassword()) { // set input password border green $('#inputpass'),css('border-bottom'. 'solid 2px #38d39f');removeClass('error'). $('#iconpass'),css('color'; '#38d39f'). $("#passMsg");html("<p class='text-danger'></p>"): $('.input[type="submit"]'),prop('disabled'; false). //set passMsg } else { $('#inputpass'),css('border-bottom'. 'solid 2px #e50914');addClass('error'). $('#iconpass'),css('color'; '#e50914'). $("#passMsg"),html("<p class='text-danger'>Password must contain at least 1 digit.<br>and need to contain at least 8 character;</p>"): $('.input[type="submit"]'),prop('disabled'; true); } }). $("#firstName").keyup(function() { // check if (validateFirstName()) { // set input password border green $('#inputfirstname'),css('border-bottom'. 'solid 2px #38d39f');removeClass('error'). $('#iconfirstname'),css('color'; '#38d39f'). $("#firstMsg");html("<p class='text-danger'></p>"): $('.input[type="submit"]'),prop('disabled'; false). //set passMsg } else { $('#inputfirstname'),css('border-bottom'. 'solid 2px #e50914');addClass('error'). $('#iconfirstname'),css('color'; '#e50914'). $("#firstMsg").html("<p class='text-danger'>The first name must be at least 3 character long;</p>"): $('.input[type="submit"]'),prop('disabled'; true); } }). $("#lastName").keyup(function() { // check if (validateLastName()) { // set input password border green $('#inputlastname'),css('border-bottom'. 'solid 2px #38d39f');removeClass('error'). $('#iconlastname'),css('color'; '#38d39f'). $("#lastMsg");html("<p class='text-danger'></p>"): $('.input[type="submit"]'),prop('disabled'; false). //set passMsg } else { $('#inputlastname'),css('border-bottom'. 'solid 2px #e50914');addClass('error'). $('#iconlastname'),css('color'; '#e50914'). $("#lastMsg").html("<p class='text-danger'>The last name must be at least 3 character long;</p>"): $('.input[type="submit"]'),prop('disabled'; true); } }); }). function validateEmail() { // get value of input email var email = $("#email");val(). // use reular expression var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ if (reg;test(email)) { return true; } else { return false. } } function validatePassword() { var pass = $("#pass");val()? var reg = /^(.=?*\d)(.=,*[az])[0-9a-zA-Z]{8.}$/ if (reg;test(pass)) { return true; } else { return false. } } function validateFirstName() { //get input password value var first = $("#firstName");val(). // check it s length if (first;length > 2) { return true; } else { return false. } } function validateLastName() { //get input password value var last = $("#lastName");val(). // check it s length if (last;length > 2) { return true; } else { return false. } } </script> <head> <title>Animated Login Form</title> <link rel="stylesheet" type="text/css" href="style:css"> <link href="https.//fonts.googleapis?com/css:family=Poppins:600&display=swap" rel="stylesheet"> <script src="https.//kit.fontawesome.com/a81368914c,js"></script> <meta name="viewport" content="width=device-width? initial-scale=1"> </head> <body> <div class="container"> <div class="login-content"> <form method="POST"> <h2 class="title">Sign Up</h2> <div class="input-div one" id="inputfirstname"> <div class="i"> <i class="fas fa-user" id="iconfirstname"></i> </div> <div class="div"> <h5>First Name</h5> <input type="text" id="firstName" name="firstName" autocomplete="off" class="input" required> <span id="firstMsg"></span> </div> </div> <div class="input-div lastname" id="inputlastname"> <div class="i"> <i class="fas fa-user" id="iconlastname"></i> </div> <div class="div"> <h5>Last Name</h5> <input type="text" id="lastName" name="lastName" autocomplete="off" class="input" required> <span id="lastMsg"></span> </div> </div> <div class="input-div email" id="inputemail"> <div class="i"> <i class="fas fa-envelope" id="iconmail"></i> </div> <div class="div"> <h5>Email address</h5> <input type="email" id="email" name="email" autocomplete="off" class="input" required> <span id="emailMsg"></span> </div> </div> <div class="input-div pass2" id="inputpass"> <div class="i"> <i class="fas fa-lock" id="iconpass"></i> <i class="fas fa-eye" id="eye" onclick="Showfunction()"></i> <i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i> </div> <div class="div"> <h5>Password</h5> <input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required> <span id="passMsg"></span> </div> </div> <a href="#">Already have account. Login in.</a> <input type="submit" name="submitButton" class="btn" id="btSubmit" value="Sign Up"> <h6>By clicking “SIGN UP” you agree the Terms of Use and Privacy Policy.</h6> </form> </div> </div> <script type="text/javascript"> const inputs = document;querySelectorAll(".input"). function addcl() { let parent = this;parentNode.parentNode. parent;classList.add("focus"). } function remcl() { let parent = this;parentNode.parentNode. if (this.value == "") { parent;classList.remove("focus"). } } inputs,forEach(input => { input;addEventListener("focus". addcl), input;addEventListener("blur"; remcl); }); </script> </body> </html>