Javascript 无法设置属性'；类名'；表单验证js脚本上的空值_Javascript_Html_Css_Forms_Verification

Javascript 无法设置属性'；类名'；表单验证js脚本上的空值

javascript html css forms

Javascript 无法设置属性'；类名'；表单验证js脚本上的空值,javascript,html,css,forms,verification,Javascript,Html,Css,Forms,Verification,我试图在键入不包含“@”的文本时使文本框的边框变为红色（这是一个电子邮件检查器）。不幸的是，这并没有发生我曾尝试使用一个包含新边框颜色的类，但不幸的是，似乎从未应用此更改这是html和js代码： <!DOCTYPE html> <html> <head> <title> Sign Up Page </title> <link rel="stylesheet" href="style.css" media="scree

我试图在键入不包含“@”的文本时使文本框的边框变为红色（这是一个电子邮件检查器）。不幸的是，这并没有发生

我曾尝试使用一个包含新边框颜色的类，但不幸的是，似乎从未应用此更改

这是html和js代码：

<!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("you must have to filled value with @");

 document.getElementById("nameT").style.color="red";

 document.getElementById("fname").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>
    </body>

  </html>

如果未在电子邮件文本框中键入“@”符号，则预期输出为红色边框。实际结果不是这样的，而是一个“无法将属性'className'设置为null”错误。

您使用的是

文档.getElementById（“fname”）

，但是您没有任何

id

具有名称

“fname”

，因此需要更新输入

<input type="text" id="fname" name="fname" placeholder="enter 
   email" onblur="validateForm()">

并将

.error

类更改为

.error{
    border-bottom:2px solid red !important;
}

您正在使用

文档.getElementById（“fname”）

，但您没有任何名为

“fname”

的

id

，因此请将输入更新为

<input type="text" id="fname" name="fname" placeholder="enter 
   email" onblur="validateForm()">

并将

.error

类更改为

.error{
    border-bottom:2px solid red !important;
}

通过

document.forms

访问元素进行尝试，如下所示

函数validateForm（）{
var x=document.forms[“myForm”][“fname”].value；
如果（x==“”）{
警惕（“必须填写某些内容”）；
返回false；
}如果（！（x.includes（“@”））{
警报（“必须用@填充值”）；
document.forms.myForm.name.style.color=“红色”；
document.forms.myForm.name.style.border=“1px实心红色”；
document.forms.myForm.fname.className='error'；
返回false；
}否则{
document.forms.myForm.name.style.color=“#000”；
document.forms.myForm.name.style.border=“1px solid#000”；
}
}


鲸鱼
登录
电子邮件
密码

通过

文档访问元素进行尝试。表单如下

函数validateForm（）{
var x=document.forms[“myForm”][“fname”].value；
如果（x==“”）{
警惕（“必须填写某些内容”）；
返回false；
}如果（！（x.includes（“@”））{
警报（“必须用@填充值”）；
document.forms.myForm.name.style.color=“红色”；
document.forms.myForm.name.style.border=“1px实心红色”；
document.forms.myForm.fname.className='error'；
返回false；
}否则{
document.forms.myForm.name.style.color=“#000”；
document.forms.myForm.name.style.border=“1px solid#000”；
}
}

鲸鱼
登录
电子邮件
密码






只需在文本字段中添加id=fname
，并用my js替换您的js即可
<input type="text" id="fname" name="fname" placeholder="enter email" 
 onblur="validateForm()">

只需在文本字段中添加id=fname
，并用my js替换您的js即可
<input type="text" id="fname" name="fname" placeholder="enter email" 
 onblur="validateForm()">

我也尝试过这个，但不幸的是，它似乎不起作用。它显示警报并使密码变为红色，这不是你试图达到的效果吗？我已经达到了这些效果。我想要的另一个效果是文本框下面的行也从白色变为红色。@wargameliot我已经更新了代码。我相信您所指的那行是边框
。我也尝试过，但不幸的是，它似乎不起作用。它显示警报并使密码
变为红色，这不是您试图实现的吗？我已经有了这些效果。我想要的另一个效果是文本框下面的行也从白色变为红色。@wargameliot我已经更新了代码。我相信你所指的那一行是边框
。我已经更新了答案，现在一切正常，你可以检查一下。你是最好的。非常感谢。我已经更新了答案，现在它运行良好，你可以检查它。你是最好的。非常感谢。