验证表单后如何添加元素？

时间：2019-07-05 06:01:36

标签： javascript html css forms validation

我希望在用户未输入带有“ @”符号的字符串之后，在可能的情况下添加一些文本以及图片，然后单独输入文本以告知用户未输入电子邮件。

我还没有尝试过任何东西。我只想接收一些信息，可以为我指明正确的方向。

这是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").classList.add('error');

                        return false;
                   }
              }
        </script>

        <div class="ocean">
            <div class="wave"/>
            <div class="wave"/>
        </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" id="fname" 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>

这是CSS代码：

 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;
      }
      .error{
          border-bottom:2px solid red !important;
      }

预期的输出是，当用户单击电子邮件文本框，并且他们填写的电子邮件没有“ @”时，文本框下面应该突然出现一个文本，表明用户未输入电子邮件。我没有尝试实现任何代码来实现这一目标，我只是希望有人通过向我指出正确的方向来帮助我（我已经尝试对此进行研究，但我找不到任何东西）。

4 个答案:

答案 0 :(得分：1)

您可以使用输入类型='email'并使用pattern和title属性来进行完美验证

<p id="nameT"> email </p>
<input type="email" id="fname" name="fname" placeholder="enter email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" title="enter valid email address" onkeyup="myFunction(event)"> 

<script>
    function myFunction(e) {
     if (e.target.validity.valid) {
       console.log('input type email is valid');
       // rest of your javascript code
    }
</script>

通过这种方式，您可以获得对电子邮件字段的完整验证

答案 1 :(得分：0)

您可以尝试以下代码：

 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("email_error").style.display="inline-block";

         document.getElementById("fname").classList.add('error');

             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;
      }
      .error{
          border-bottom:2px solid red !important;
      }
 <!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" id="fname" name="fname" 
        placeholder="enter email" onblur="validateForm()"> 
        <span id="email_error" style="display:none">user did not enter an email</span>
       <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 :(得分：0)

只需使用<input type="email" id="fname" name="fname" placeholder="enter email" required>

即可验证电子邮件@

答案 3 :(得分：0)

如果您想进行简单的电子邮件验证

<input type="email" name="email" required>

这是浏览器的默认验证

工作代码

<form>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>

相关问题
最新问题