自定义JavaScript表单验证的问题_Javascript_Html

自定义JavaScript表单验证的问题

javascript html

自定义JavaScript表单验证的问题,javascript,html,Javascript,Html,我试图用下面的代码进行表单验证，但它似乎不起作用。这里可能有什么问题？我怎样才能修好它？我错过了什么条件是用户名和密码都必须是“CS”，只有这样用户才能登录。当他们输入正确的用户名和密码时，他们应该被重定向到此页面：C:\Users\Anirudha\Desktop\Latex++2\Latex++ 我的代码如下所示： <!DOCTYPE html> <html> <head> <title> LOGIN Form</tit

我试图用下面的代码进行表单验证，但它似乎不起作用。这里可能有什么问题？我怎样才能修好它？我错过了什么

条件是用户名和密码都必须是“CS”，只有这样用户才能登录。当他们输入正确的用户名和密码时，他们应该被重定向到此页面：

C:\Users\Anirudha\Desktop\Latex++2\Latex++

我的代码如下所示：

<!DOCTYPE html>
<html>
  <head>  
    <title> LOGIN Form</title>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/bootstrap.css">
       <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
       <style>
       body{
          margin:0;
          padding:0;
          background:url("ack.jpeg");
          background-size: cover;
          font-family: sans-serif;
           }
    
      .loginbox{  width: 320px;
          height: 450px;
          background: #000;
          color: #fff;
          top:20%;
          left:36%;
          position:absolute;
          transform: translate{-50%,-50%}
          box-sizing: border-box;
          padding: 70px 30px;
          opacity:.7;
         }
      .avatar{  width: 100px;
          height: 100px;
          border-radius:50%;
          position:absolute;
          top:-14%;
          left:calc(50% - 50px);
             }
      h1{    margin:0;
          padding: 0 0 20px;
          text-align: center;
          font-size: 30px;
          font-family:AR JULIAN;
          color:red;
        }    
      .loginbox p{  margin:0;
          padding: 0;
          font-weight:bold;
                 }
      .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:40px;
          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 a:hover
      {  
        color:#ffc107;
      }

      .active{
        color:#fff;
        background:#e02626;
        border-radius:4px;
      }
       </style>
  </head>
  <body>
    <img class="log">
    <div class="loginbox">
    <img src="avatar1.png" class="avatar">
    <h1>Login Here</h1>
    
    
    <script>


function validateform(){  
var name=document.myform.name.value;  
var password=document.myform.password.value;  
  
if(name!=CS){
    alert("Enter the Username as mentioned ");  
  return false;  
}
else if(password!=CS){
    alert("Enter the Password as mentioned ");
    return false;
}

} 

    </script>
    
    
    
    
    
    <form name="myform" method="POST" onsubmit="return validateForm()">
    <p> Username</p>
    <input type="text" name="name" placeholder="Enter Username: CS319">
    <p> Password</p>
    <input type="password" name="password" placeholder="Enter Password: CS319"><br>
   
    <input type="submit" name="Login" value="Login">

    <a href="file:///C:/Users/Anirudha/Desktop/Latex++2/forgotpwd.html#">Forgot password?</a><br>
    <a href="file:///C:/Users/Anirudha/Desktop/Latex++2/CreateAccount.html#">Don't have an acoount?</a>
    </form>
    
  
  </div>
    <script src="js/jquery-2.1.4.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/ajax-utils.js"></script>
      <script src="js/script.js"></script>
  </body>
</html>


登录表单
身体{
保证金：0；
填充：0；
背景：url（“ack.jpeg”）；
背景尺寸：封面；
字体系列：无衬线；
}
.loginbox{宽度：320px；
高度：450px；
背景：#000；
颜色：#fff；
最高：20%；
左：36%；
位置：绝对位置；
转换：转换{-50%，-50%}
框大小：边框框；
填充：70px 30px；
不透明度：.7；
}
.avatar{宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对位置；
前-14%；
左：计算（50%-50px）；
}
h1{边距：0；
填充：0 20px；
文本对齐：居中；
字体大小：30px；
字体系列：AR朱利安；
颜色：红色；
}    
.loginbox p{边距：0；
填充：0；
字体大小：粗体；
}
.loginbox输入{宽度：100%；
边缘底部：20px；
}
.loginbox输入[type=“text”]，输入[type=“password”]{
边界：无；
边框底部：1px实心#fff；
背景：透明；
大纲：无；
高度：40px；
颜色：#fff；
字体大小：16px；
}
.loginbox输入[type=“submit”]{
边界：无；
大纲：无；
高度：40px；
背景：#fb2525；
颜色：#fff；
字号：18px；
边界半径：20px；
}
.loginbox输入[type=“submit”]：悬停
{游标：指针；
背景#ffc107；
颜色：#000；
}
.loginbox a{
文字装饰：无；
字体大小：12px；
线高：20px；
颜色：暗灰色；
}
.loginbox a:悬停
{  
颜色：#ffc107；
}
.主动{
颜色：#fff；
背景：#e02626；
边界半径：4px；
}
在这里登录
函数validateform（）{
var name=document.myform.name.value；
var password=document.myform.password.value；
如果（名称！=CS）{
警报（“输入所述用户名”）；
返回false；
}
else if（密码！=CS）{
警报（“输入所述密码”）；
返回false；
}
} 
用户名
密码

您的代码有几个小问题。它们可能只是打字错误，但仍足以引起问题：

在表单的

onsubmit

属性中，可以调用

validateForm（）

函数，但该函数实际上被命名为

validateForm（）

（带有小写的f）

当您将用户名和密码的值与所需值进行比较时，您将与未定义的变量进行比较，而不是与字符串进行比较。要与字符串进行比较，需要使用引号：

'CS'

而不是

CS

将脚本替换为以下内容，验证将正常工作：


函数validateForm（）{
var name=document.myform.name.value；
var password=document.myform.password.value；
如果（名称！=“CS”）{
警报（“输入所述用户名”）；
返回false；
}否则如果（密码！==“CS”）{
警报（“输入所述密码”）；
返回false；
}
}

尽管如此，这并不是在JavaScript中进行表单验证的最佳方法。我还建议您学习一些基本的JavaScript，以防止出现类似您在这里遇到的问题。我建议您从教程开始，然后继续，然后学习更多关于事件处理程序的内容

最后，我想补充一点，这不是验证用户名和密码的安全方法，因为有效值在每个访问者的源代码中都是可见的。有很多更好的方法可以做到这一点，但这取决于您的需求和配置，因此我建议您进行一些研究，如果有不清楚的地方，可以提出新的问题。

对“本文”（单击vs.提交事件侦听器）感兴趣的是，他们不断将事件处理程序附加到

文档中，通常，只有在需要活动授权的情况下，您才会这样做。对于submit
，我想不出你为什么要这么做；您应该将提交事件处理程序附加到表单对象，而不是文档。不是最好的文章。