当前位置： 文江博客话题详情

无法使用JS验证形式

发布于 2025-02-13 03:47:35 字数 1380 浏览 1 评论 0原文

我试图通过查看是否填充所有输入来验证表格。因此，当电子邮件或密码为空时，它应该返回警报。但是，当我运行此HTML文件时，它并没有提醒我。

我的代码：

function validateform() {
  var name = document.login.email.value;
  var password = document.login.password.value;

  if (name == null || name == "") {
    alert("Name can't be blank");
    return false;
  } else if (password.length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
  }
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" text="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="button" value="submit">
  </form>
</body>

</html>

提前致谢。

原文

I am trying to validate a form by seeing if all the inputs are filled. So here when either email or password are empty, it should return an alert. But when I run this html file, it isn't alerting me of that.

My code:

function validateform() {
  var name = document.login.email.value;
  var password = document.login.password.value;

  if (name == null || name == "") {
    alert("Name can't be blank");
    return false;
  } else if (password.length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
  }
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" text="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="button" value="submit">
  </form>
</body>

</html>

Thanks in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

囚你心 2025-02-20 03:47:36
<script type="text/javascript">
    function validateform(){  
        var name = document.getElementById("email").value;
        var password = document.getElementById("pass").value;
        
        if (name.replace(/\s/g, '') === ""){  
            alert("Name can't be blank");  
            return false:
        }

        if (password.replace(/\s/g, '').length < 6){  
            alert("Password must be at least 6 characters long.");
            return false;
        }  
    }
</script>

<script type="text/javascript">
    function validateform(){  
        var name = document.getElementById("email").value;
        var password = document.getElementById("pass").value;
        
        if (name.replace(/\s/g, '') === ""){  
            alert("Name can't be blank");  
            return false:
        }

        if (password.replace(/\s/g, '').length < 6){  
            alert("Password must be at least 6 characters long.");
            return false;
        }  
    }
</script>
回复 原文
心房敞 2025-02-20 03:47:36

您应该通过 dom方法访问dom元素的值喜欢document.getElementByid（），document.queryselector（）， document。 getElementsByClassName（），document.queryselectorall（

。

  1. 等
  2. ）

纯html

通过添加必需属性<代码>电子邮件>电子邮件和password字段浏览器将进行验证。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" text="BCBS outlook email" required>
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" required>
    <br>
    <input type="submit" value="submit">
  </form>
</body>

</html>

2。使用JavaScript ，

即使浏览器默认可以验证表单字段，使用JavaScript被视为验证的最佳实践。

在.trim（）下面的摘要中，用于从表单字段中的字符串中删除空格。

后卫条款用于摘要中

function validateform() {
  const name = document.getElementById("email").value;
  const password = document.getElementById("pass").value; 

  if (name.trim() === null || name.trim() === "") {
    alert("Name can't be blank");
  } 
  if (password.trim().length < 6) {
    alert("Password must be at least 6 characters long.");
  }
  return;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" text="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="submit" value="submit">
  </form>
</body>

</html>

You should access the value of DOM elements by DOM Methods like document.getElementById(), document.querySelector(), document.getElementsByClassName(), document.querySelectorAll() etc.

You can do the validation in two ways:

  1. With Pure HTML
  2. With JavaScript

1) With Pure HTML

By adding required attribute to email and password fields browser will do the validation.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" text="BCBS outlook email" required>
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" required>
    <br>
    <input type="submit" value="submit">
  </form>
</body>

</html>

2. With JavaScript

Even if browser can validate the form fields by default, using javascript is considered as best practice for validation.

In snippet below .trim() is used to remove whitespace from the strings in form fields.

Guard Clause is used in snippet

function validateform() {
  const name = document.getElementById("email").value;
  const password = document.getElementById("pass").value; 

  if (name.trim() === null || name.trim() === "") {
    alert("Name can't be blank");
  } 
  if (password.trim().length < 6) {
    alert("Password must be at least 6 characters long.");
  }
  return;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
    <label for="email">BCBS outlook email</label>
    <br>
    <input type="email" name="email" id="email" text="BCBS outlook email">
    <br>
    <label for="pass">Password</label>
    <br>
    <input type="password" name="pass" id="pass">
    <br>
    <input type="submit" value="submit">
  </form>
</body>

</html>

回复 原文
止于盛夏 2025-02-20 03:47:36

您需要使用getElementById（）访问输入元素，然后确保修剪字符串以摆脱任何空间：

function validateform() {  
  var name = document.getElementById("email").value;
  var password = document.getElementById("pass").value;

  if (name.trim() == null || name.trim() == "") {
    alert("Name can't be blank");
    return false;
  } else if (password.trim().length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
  }
}
<form name="login" onsubmit="return validateform()" method="post" action="/login_process">
  <label for="email">BCBS outlook email</label>
  <br>
  <input type="email" name="email" id="email" text="BCBS outlook email">
  <br>
  <label for="pass">Password</label>
  <br>
  <input type="password" name="pass" id="pass">
  <br>
  <input type="submit" value="submit">
</form>

You need to access the input elements using getElementById(), then make sure you trim your strings to get rid of any spaces:

function validateform() {  
  var name = document.getElementById("email").value;
  var password = document.getElementById("pass").value;

  if (name.trim() == null || name.trim() == "") {
    alert("Name can't be blank");
    return false;
  } else if (password.trim().length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
  }
}
<form name="login" onsubmit="return validateform()" method="post" action="/login_process">
  <label for="email">BCBS outlook email</label>
  <br>
  <input type="email" name="email" id="email" text="BCBS outlook email">
  <br>
  <label for="pass">Password</label>
  <br>
  <input type="password" name="pass" id="pass">
  <br>
  <input type="submit" value="submit">
</form>

回复 原文
情丝乱 2025-02-20 03:47:36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
        <label for="email">BCBS outlook email</label>
        <br>
        <input type="email" name="email" id="email" text="BCBS outlook email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" name="pass" id="pass">
        <br>
        <input type="submit" value="submit">
    </form>
</body>

<p id="errorTxt"></p>


<script> 
        function validateform(){  
            var name = document.getElementById("email").value;
            var password = document.getElementById("pass").value;
           if (isNaN(name) || name < 1 || (isNaN(name) || password < 6) ) {
                document.getElementById("errorTxt").innerHTML = text;
                return false;
            }  
        
        }  
</script> 
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
        <label for="email">BCBS outlook email</label>
        <br>
        <input type="email" name="email" id="email" text="BCBS outlook email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" name="pass" id="pass">
        <br>
        <input type="submit" value="submit">
    </form>
</body>

<p id="errorTxt"></p>


<script> 
        function validateform(){  
            var name = document.getElementById("email").value;
            var password = document.getElementById("pass").value;
           if (isNaN(name) || name < 1 || (isNaN(name) || password < 6) ) {
                document.getElementById("errorTxt").innerHTML = text;
                return false;
            }  
        
        }  
</script> 
</body>
</html>
回复 原文
金兰素衣 2025-02-20 03:47:36

代码中很少有错误。

  1. DOM中使用密码的方式是不正确的。
  2. 由于您使用了输入类型电子邮件。默认情况下，Broweser将检查空价值和有效电子邮件。

这是一个工作代码。根据上述修改。

 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function validateform() {
       
          var name = document.login.email.value;
          var password = document.login.pass.value;
        
          if (name == null || name == "") {
            alert("Name can't be blank");
            return false;
          } else if (password.length < 6) {
            alert("Password must be at least 6 characters long.");
            return false;
          }
        }
        
    </script>
</head>
<body>
    <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
        <label for="email">BCBS outlook email</label>
        <br>
        <input type="email" name="email" id="email" text="BCBS outlook email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" name="pass" id="pass">
        <br>
        <input type="submit" value="submit">
    </form>
</body>

Few mistakes in your code.

  1. The way password is accssed in dom is incorrect.
  2. Since you have used input type email. Broweser will by default check for empty value and valid email.

Here is a working code. as per above modifications.

 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function validateform() {
       
          var name = document.login.email.value;
          var password = document.login.pass.value;
        
          if (name == null || name == "") {
            alert("Name can't be blank");
            return false;
          } else if (password.length < 6) {
            alert("Password must be at least 6 characters long.");
            return false;
          }
        }
        
    </script>
</head>
<body>
    <form name="login" onsubmit="return validateform()" method="post" action="/login_process">
        <label for="email">BCBS outlook email</label>
        <br>
        <input type="email" name="email" id="email" text="BCBS outlook email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" name="pass" id="pass">
        <br>
        <input type="submit" value="submit">
    </form>
</body>
回复 原文
~没有更多了~

关于作者

人心善变

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文