表單代碼上的變色文本驗證問題
[英]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.