表单代码上的变色文本验证问题
[英]Problem with color changing text verification on form code
问题描述
我一直在尝试开发一种用于接收电子邮件和密码的方法，并通过查看用户在提交的内容中是否包含“ @”来更改（暂时）（即使现在是电子邮件）。 如果没有“ @”，则包含文本框“ 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>
当我单击电子邮件框时，警报消息将弹出，文本不会更改颜色。 我知道没有错误消息弹出窗口。 这几乎就像跳过更改颜色代码一样。
2 个解决方案
解决方案1
1 2019-07-04 07:04:06
您可以这样尝试：
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>
解决方案2
1 2019-07-04 07:07:15
您必须将电子邮件的名称更改为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>
检查文本的表单输入并更改其颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.