数据未正确进入 Firestore 数据库

debugcn 发表于 Dev

鲁班·贾林

我的项目包含一个注册表单，我使用 firestore 来存储我的数据。当我填写表格并提交数据时，它没有进入数据库。而如果我将任何一个字段留空，其他字段数据输入成功，空字段设置为空。请看下面的代码和图片：

代码：

//app.js

console.log("Initialisation Successful!");
var db = firebase.firestore();

function regUser() {
  var uName = document.getElementById("name").value;
  var email = document.getElementById("emailadd").value;
  var gend = document.getElementById("sel_gender").value;
  var pass = document.getElementById("password").value;


  db.collection("Users").add({
    userName: uName,
    emailAddress: email,
    gender: gend,
    userPassword: pass

  })
  .then(function() {
    console.log("Data entered successfully!");
  })
  .catch(function(error) {
    console.error("Error!", error);
  });
}

@font-face {
  font-family: myFont;
  src: url(CutiveMono-Regular.ttf);
}

@font-face {
  font-family: myFont2;
  src: url(MedievalSharp.ttf);
}

#main {
  padding-top: 3%;
  padding-bottom: 4%;
  min-height: 90vh;
  font-family: myFont;
  font-size: 1.3em;
}

#bg {
  background-image: url("images/1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
}

#reg {
  color: white;
  font-family: myFont2;
}

#nav {
  border-style: solid;
  border-width: 0px 0px 5px 0px;
  border-color: orange;
}

#nav2 {
  border-style: solid;
  border-width: 5px 0px 0px 0px;
  border-color: orange;
}

#row {
  width: 100%;
}

#form {
  border-style: solid;
  border-width: 10px;
  border-radius: 2%;
  border-color: #F8F9FB;
  background-color: #F8F9FB;
}

.form-check-label {
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Registration Page</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="bootstrap.css" />
  <script src="bootstrap.js"></script>
  <script src="jquery.js"></script>

  <!--CSS-->
  <style>

  </style>
  <!--/CSS-->
</head>

<body>
  <!--Header-->

  <div class="header">
    <nav id="nav" class="navbar bg-dark">
      <h2 id="reg"> Registration </h2>
    </nav>
  </div>
  <!--/Header-->

  <!--Main-->
  <div class="bg" id="bg">
    <div class="main" id="main">

      <div class="row" id="row">
        <div class="col-sm-4" id="col1"></div>
        <div class="col-sm-4" id="col2">
          <form action="" method="POST" id="form">
            <div class="container">
              <div class="form-group">
                <label id="lblname" class="form-check-label" for="name"><b> First Name:</b> 
											<input id="name" name="name" class="form-control" type="text" placeholder="Insert Name" required>
										</label><br>


                <label id="lblemail" class="form-check-label" for="emailadd"><b> Email Address:</b> 
											<input id="emailadd" name="emailadd" class="form-control" type="email" placeholder="Insert Email Address" required>
										</label><br>

                <label id="lblgender" class="form-check-label" for="sel_gender"><b> Gender:</b>
										  <select class="form-control" id="sel_gender">
											<option>Male</option>
											<option>Female</option>
											<option>Other</option>
										  </select>
										</label><br>

                <label id="lblpass" class="form-check-label" for="password"><b> Password:</b> 
										<input id="password" name="password" class="form-control" type="password" placeholder="Insert Password" required>
										</label><br>

                <label id="lblcnfrmpass" class="form-check-label" for="cnfrmpassword"><b> Confirm Password:</b> 
										<input id="cnfrmpassword" name="cnfrmpassword" class="form-control" type="password" placeholder="Re-insert Password">
										</label><br><br>
                <center>
                  <button type="submit" onclick="regUser()" class="btn btn-success">Register</button>
                  <button type="button" class="btn btn-secondary">Clear</button>
                  <button type="button" class="btn btn-info">Login Instead</button>
                </center>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="col-sm-4" id="col3"></div>
    </div>
  </div>




  <!--/Main-->

  <!--Footer-->

  <div class="footer">
    <nav id="nav2" class="navbar bg-dark">

    </nav>
  </div>



  <!--Footer-->



  <!--/Footer-->
  <!--Firebase-->
  <script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-firestore.js"></script>
  <script>
    var firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
  <script src="app.js"></script>
  <!--/Firebase-->

</body>

</html>

图像：此图像显示了未添加密码而输入的数据示例。如果输入密码，则提交时没有数据进入数据库。

数据库图像

标记

将按钮类型更改为“按钮”而不是提交，因为您没有通过 POST 提交的任何表单。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。