我是一个新的编程，尤其是JS，我有一个HTML FORM验证与JS CLASS的问题来了后，填写所有所需的字段正确，但当我点击提交按钮，我得到的错误信息，阻止形式被提交！因为我的代码不工作，因为我的目的是什么，我做了什么错误。
因为我的代码不能正常工作，我到底犯了什么错误？
如何使用JS CLASS来验证和提交表单？(面向对象的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)
{
alert("Name Required");
return false;
}
}
}
}
let user = new User();
user.submitForm();
</script>因为在你创建用户对象的时候，名字是空的。
你只是在构造函数中设置了它。你需要在点击提交按钮时得到这个值。
有一种方法是按以下方式改变它。
<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()
{
this.userName = document.myForm.name.value; // <---- Here we reset userName to the input/s current value
if(this.userName == "" || this.userName == null)
{
alert("Name Required");
return false;
}
}
}
}
let user = new User();
user.submitForm();
</script>
我们在提交处理程序中重新设置userName。
你在你的构造函数中得到 "name "输入的初始值，用这个代码。
this.userName = document.myForm.name.value;
这段代码是： userName 属性的初始值，现在它是空的。当你检查你的 onSubmit 职能，该 userName 属性仍然是空的。
你需要做的是在你的 onSubmit 处理器。类似这样。
this.userName = document.myForm.name.value;
if (this.userName == "" || this.userName == null)
{
alert("Name Required");
return false;
}
这样做是行不通的，因为当输入为空时，你在构造函数中对userName进行了初始化，而当你检查userName的值时，它仍然是空的，你必须在检查前用输入值填充userName。
就像这样。
class User
{
constructor(userName,submitButton)
{
this.userName = document.myForm.name.value;
this.submitButton = document.getElementById("myForm");
}
submitForm()
{
this.submitButton.onsubmit = function()
{
this.userName = document.myForm.name.value;
if(this.userName == "" || this.userName == null)
{
alert("Name Required");
return false;
}
}
}
}
let user = new User();
user.submitForm();
我建议你创建一个方法来读取userName属性，因为它是多余的。