时间戳

首页 > 解决方案 > 即使出现错误，Javascript 验证也允许提交

javascript - 即使出现错误，Javascript 验证也允许提交

问题描述

我有一个 HTML 表单，其中包含针对各个字段的 Javascript 验证。但是，每当我提交表单时，即使表单字段正确（即不为空或为空），我添加的错误消息也会出现。

我希望仅在表单字段为空或为空时出现错误消息。

    <html lang="en-US">
      <head>
       <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=0.1,shrink-to-fit=no">
         <link type="text/css" href="/css" rel="stylesheet">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
           <title>Javascript Form Validation</title>
            <style>
             </style>
              </head>
               <body>
                <div class="container">
                 <div class="row justify-content-center">
                  <div class="col-sm-6 col-md-6 col-lg-6">
                   <div class="card">
                    <div class="card-body">
                    <form method="post" name="myForm" id="myForm">
    <div class="form-group">
    <label for="exampleInputName1">Full name</label>
    <input type="text" class="form-control" name="name" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter name">
    </div> 
    <button type="submit" name="login" class="btn btn-primary">Submit</button>
    </form>

<script>

    class User
            {
            constructor(userName,submitButton)
                {
                this.userName = document.myForm.name.value;
                this.submitButton = document.getElementById("myForm");
                }
            submitForm()
                {
                this.submitButton.onsubmit = function()
                    {
                    if(this.userName == "" || this.userName == null)
                        {
                        document.write("Name Required");
                        return false;
                        }
                    }
                }
            }
    let user = new User();
    user.submitForm();
</script>

标签： javascript

解决方案

类构造函数中的这一行

this.userName = document.myForm.name.value;

一旦您输入用户名，this.userName 的值就会过时，因此它始终为空。

您应该从构造函数中移动该行并将其放置如下所示：

this.submitButton.onsubmit = function()
{
    this.userName = document.myForm.name.value;

或者

理想情况下，您可以这样做：

class User
{
    constructor(userName,submitButton)
    {
        this.userName = document.myForm.name;  /* remove .value here */
        this.submitButton = document.getElementById("myForm");
    }
    submitForm()
    {
        this.submitButton.onsubmit = function()
        {
            if(this.userName.value == "" || this.userName.value == null) /* add .value here */
            {
                document.write("Name Required");
                return false;
            }
        }
    }
}

我在 2 x 行已更改的行上添加了评论。

推荐阅读