当用户提交函数但返回空白值时，我尝试打印表单中的值。
这是我的 JavaScript 代码:
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
我的 HTML 表单为:
<body>
<div class="container">
<div class="col-md-8">
<div class="starter-template">
<h1>Login with javascript</h1>
<p class="lead">Please Enter Following Details</p>
<h1 id="demo"></h1>
<form name="form" onSubmit="return login.validation();" action="#" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" name="username" class="form-control" id="Username" placeholder="Please Enter your Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="Email" placeholder="Please enter your Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Re-Password</label>
<input type="password" class="form-control" id="Re-Password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="js/login.js"></script>
<script href="js/bootstrap.js"></script>
<!-- /.container -->
</body>
为什么值没有进入html <p>标签。
最佳答案
您的代码可以正常工作。但由于该函数在提交表单时执行，因此在使用提交的数据刷新页面之前，用户名会快速记录在控制台中。您可以通过向函数添加 event.preventDefault(); 来确认这一点并进行测试，以防止提交表单，以便页面在控制台中保持可见。
<script>
var login = new function()
{
var name = null ;
this.validation = function()
{
event.preventDefault();
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
</script>
如果这不是您要找的，请告诉我。
关于javascript - 我的 JavaScript 表单验证函数被调用两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45688131/