我正在编写一个脚本来验证 onkeyup 的输入字段。每当验证函数的参数未填满时，我希望边框颜色为红色，当所有参数都通过时，我希望它为绿色。问题是，一旦传递了参数，边框颜色就会变成绿色(它应该这样做)，但是，一旦它不符合先前的参数(就像输入应该有数字一样) t), 边框保持绿色，不会变成红色(预期结果)。任何帮助将不胜感激。祝周末愉快!
function validateSignUpKeyup() {
var first = document.getElementById("first").value;
var last = document.getElementById("last").value;
var email1 = document.getElementById("email1").value;
var password1 = document.getElementById("password1").value;
var parentFirst = document.getElementById("parent-first").value;
var parentLast = document.getElementById("parent-last").value;
var childFirst = document.getElementById("child-first").value;
var email2 = document.getElementById("email2").value;
var password2 = document.getElementById("password2").value;
var month1 = document.getElementById("month1").value;
var day1 = document.getElementById("day1").value;
var year1 = document.getElementById("year1").value;
var month2 = document.getElementById("month2").value;
var day2 = document.getElementById("day2").value;
var year2 = document.getElementById("year2").value;
var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var nameFilter = /^([^0-9]*)$/;
// First name can't be blank
if (first == "") {
document.getElementById("first").className = document.getElementById("first").className + " error";
document.getElementById("firstid").innerHTML = "Can't be blank";
}
// First name can't be a number
else if (!nameFilter.test(first)) {
document.getElementById("first").className = document.getElementById("first").className + " error";
document.getElementById("firstid").innerHTML = "Can't have numbers";
}
// First name can't be longer than 50 characters
else if (first.length > 50) {
document.getElementById("first").className = document.getElementById("first").className + " error";
document.getElementById("firstid").innerHTML = "Name is too long";
}
// First name no error
else {
document.getElementById("first").className = document.getElementById("first").className + " no-error";
document.getElementById("firstid").innerHTML = "";
}
}body {
background-image: url(../../Icons/violin.jpeg);
background-repeat: no-repeat;
background-position: center absolute;
}
@media only screen and (min-width: 768px) {
#box {
margin-top: 60px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) {
body {
background-size: cover;
}
}
#box {
border-radius: 5px;
background: white;
}
.blue-button {
background-color: #00b4ff;
color: #fff;
margin-top: 2.8%;
margin-bottom: 2.5%;
width: 100%;
}
#logo {
margin-top: 20px;
}
h1 {
font-size: 1em;
font-weight: normal;
margin-top: 15px;
margin-bottom: 15px;
}
#individual {
display: block;
}
#parent {
display: none;
}
#small {
font-size: 0.8em;
}
.month-space {
margin-right: 0.9em;
}
.day-space {
margin-right: 0.9em;
}
.year-space {
margin-right: 0.9em;
}
.radio {
margin-bottom: 15px;
}
.error {
border: 2px solid red;
}
.no-error {
border-color: green;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Meta tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Page description">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--- Include CSS -->
<link rel="stylesheet" href="Student-Sign-Up.css" type="text/css" />
<title>Music Lessons with Online Teachers - Muebie</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 mx-auto" id="box">
<!-- Logo and Sign Up Text -->
<div class="text-center">
<a href="#">
<img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
</a>
<h1>Signing up as</h1>
</div>
<!-- Radio check 1 -->
<div class="form-check form-check-inline radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
</label>
</div>
<!-- Individual Form -->
<form id="individual" action="#" method="POST" autocomplete="off">
<!-- Individual First Name -->
<div class="form-group">
<span id="firstid" class="text-warning"></span>
<input class="form-control" id="first" name="first" type="text" placeholder="First name" onkeyup="validateSignUpKeyup()" />
</div>
<!-- Individual Last Name -->
<div class="form-group">
<span id="lastid" class="text-warning"></span>
<input class="form-control" id="last" name="last" type="text" placeholder="Last name" />
</div>
<!-- Individual Email -->
<div class="form-group">
<span id="email1id" class="text-warning"></span>
<input class="form-control email" id="email1" name="email" type="text" placeholder="Email" />
</div>
<!-- Individual Password -->
<div class="form-group">
<span id="password1id" class="text-warning"></span>
<input class="form-control" id="password1" name="password" type="password" placeholder="Password" />
</div>
<!-- Individual's Birthday -->
<div class="form-group">
<label>Birthday</label>
<div class="form-inline">
<!-- Month -->
<select id="month1" name="month" onChange="changeDate1(this.options[selectedIndex].value);" class="form-control month-space">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Day -->
<select name="day" id="day1" class="form-control day-space">
<option value="na">Day</option>
</select>
<!-- Year -->
<select name="year" id="year1" class="form-control year-space">
<option value="na">Year</option>
</select>
<span id="date1id" class="text-warning"></span>
</div>
</div>
<button type="submit" name="submit" class="btn blue-button">Confirm</button>
</form>
<!-- Parent Form -->
<form id="parent" class="hidden" action="#" method="POST" onsubmit="return validateStudentSignUpForm()" autocomplete="off">
<!-- Parent's First Name -->
<div class="form-group">
<span id="parent-firstid" class="text-warning"></span>
<input class="form-control" id="parent-first" name="parent-first" type="text" placeholder="Parent's first name" />
</div>
<!-- Parent's Last Name -->
<div class="form-group">
<span id="parent-lastid" class="text-warning"></span>
<input class="form-control" id="parent-last" name="parent-last" type="text" placeholder="Parent's last name" />
</div>
<!-- Parent Email -->
<div class="form-group">
<span id="email2id" class="text-warning"></span>
<input class="form-control" id="email2" name="email" type="text" placeholder="Email" />
</div>
<!-- Parent Password -->
<div class="form-group">
<span id="password2id" class="text-warning"></span>
<input class="form-control" id="password2" name="password" type="password" placeholder="Password" />
</div>
<!-- Child's First Name -->
<div class="form-group">
<span id="child-firstid" class="text-warning"></span>
<input class="form-control" id="child-first" name="child-first" type="text" placeholder="Child's first name" />
</div>
<!-- Child's Birthday -->
<div class="form-group">
<label>Child's birthday</label>
<div class="form-inline">
<!-- Month -->
<select id="month2" name="month" onChange="changeDate2(this.options[selectedIndex].value);" class="form-control month-space">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Day -->
<select name="day" id="day2" class="form-control day-space">
<option value="na">Day</option>
</select>
<!-- Year -->
<select name="year" id="year2" class="form-control year-space">
<option value="na">Year</option>
</select>
<span id="date2id" class="text-warning"></span>
</div>
</div>
<button type="submit" name="submit" class="btn blue-button">Confirm</button>
</form>
<p class="text-center" id="small">By signing up you agree to our
<a href="#">Terms of Use</a> and
<a href="#">Privacy Policy</a>
</p>
</div>
</div>
</div>
<!-- Date Script -->
<script src="Date.js"></script>
<!-- Form Validation Scripts -->
<script src="Validate-Form.js"></script>
<script src="Validate-Form-Keyup.js"></script>
<!-- Radio Check Script -->
<script src="Radio-Check.js"></script>
<!--- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>最佳答案
问题是，在你键入一个正确的值之后，他有一个 no-error 类，即使你在之后向它添加一个 error 类，它也会是绿色的.如果你能看到，如果你从第一次开始只写数字(-提交不正确)它会变成红色。只有在获得非错误类一次后，它才会保持绿色。所以你要做的就是删除 non-error 类。可以使用 jquery 轻松完成:
// First name can't be blank
if (first == "") {
$("#first").removeClass("no-error");
$("#first").addClass("error");
// document.getElementById("first").className = document.getElementById("first").className + " error";
document.getElementById("firstid").innerHTML = "Can't be blank";
}
// First name can't be a number
else if (!nameFilter.test(first)) {
$("#first").removeClass("no-error");
$("#first").addClass("error");
// document.getElementById("first").className = document.getElementById("first").className + " error";
document.getElementById("firstid").innerHTML = "Can't have numbers";
}
// First name can't be longer than 50 characters
else if (first.length > 50) {
$("#first").removeClass("no-error");
$("#first").addClass("error");
// document.getElementById("first").className = document.getElementById("first").className + " error";
document.getElementById("firstid").innerHTML = "Name is too long";
}
// First name no error
else {
$("#first").removeClass("error");
$("#first").addClass("no-error");
// document.getElementById("first").className = document.getElementById("first").className + " no-error";
document.getElementById("firstid").innerHTML = "";
}
希望它的帮助:)
没有 jquery 使用这个:
if (document.getElementById("first").className.replace("no-error", "error") == -1) {
document.getElementById("first").className = document.getElementById("first").className + " error";
}
关于javascript - JavaScript 表单中的边框颜色不会覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50308108/