我一直在尝试开发一种用于接收电子邮件和密码并立即更改（现在）的电子邮件，即使该电子邮件是电子邮件，也可以通过查看用户是否在提交中包含“ @”来实现。如果没有“ @”，则包含文本框“ email”标题的段落标签应更改颜色。不幸的是，事实并非如此，我也不知道为什么会这样。我尝试了几种更改颜色的方法，但都失败了。如果有人可以帮助我解决这个问题，那将是我的一天。
我已经尝试使用不同的验证方法和不同的方法来更改段落标签的样式。例如，我尝试使用单独的样式代码，当未找到“ @”符号时，该段落应将默认样式代码切换为两个。我还尝试过使用js代码像onSubmit或onBlur这样的不同时间运行。这些更改没有解决我的问题。
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center,
rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
-.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
} <!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("@")))
{
alert("");
document.getElementById("nameT").className="error";
return false;
}
}
</script>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p name="nameT"> email </p>
<input type="text" name="fname" placeholder="enter
email" onblur="validateForm()">
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
当我单击电子邮件框时，警报消息将弹出，文本不会更改颜色。我知道没有错误消息弹出窗口。几乎就像跳过更改颜色代码一样。
答案 0 :(得分：1)
您可以尝试这样：
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("@")))
{
alert("you must have to filled value with @");
document.getElementById("nameT").style.color="red";
return false;
}
} html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center,
rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
-.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" name="fname" placeholder="enter
email" onblur="validateForm()">
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
答案 1 :(得分：1)
您必须将电子邮件的名称更改为id并添加错误的类，请检查以下代码
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("@")))
{
alert("");
document.getElementById("nameT").className="error";
return false;
}
}
</script>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" name="fname" placeholder="enter
email" onblur="validateForm()">
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>