我的JavaScript表单验证函数被调用了两次_Javascript_Html_Twitter Bootstrap 3

我的JavaScript表单验证函数被调用了两次

javascript html twitter-bootstrap-3

我的JavaScript表单验证函数被调用了两次,javascript,html,twitter-bootstrap-3,Javascript,Html,Twitter Bootstrap 3,当用户提交函数但返回空值时，我试图打印表单中的值以下是我的JavaScript代码： var login = new function() { var name = null ; this.validation = function() { this.name = document.getElementById("Username").value; console.log(this.name); document.ge

当用户提交函数但返回空值时，我试图打印表单中的值

以下是我的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>


使用javascript登录
请输入以下详细信息
用户名
电子邮件地址
密码
重新输入密码
提交

为什么该值没有进入html

标记。

您的代码可以正常工作。但是，由于函数在提交表单时执行，因此在使用提交的数据刷新页面之前，用户名会快速登录到控制台。您可以通过添加

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>


var login=新函数（）
{
var name=null；
this.validation=函数（）
{
event.preventDefault（）；
this.name=document.getElementById（“用户名”）.value；
console.log（this.name）；
document.getElementById（“demo”）.innerHTML=this.name；
};
};

如果这不是您想要的，请告诉我。
您的代码可以正常工作。但是，由于函数在提交表单时执行，因此在使用提交的数据刷新页面之前，用户名会快速登录到控制台。您可以通过添加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>


var login=新函数（）
{
var name=null；
this.validation=函数（）
{
event.preventDefault（）；
this.name=document.getElementById（“用户名”）.value；
console.log（this.name）；
document.getElementById（“demo”）.innerHTML=this.name；
};
};

如果这不是您想要的，请告诉我。
我们发现javascript验证失败，您需要返回false。如果你不这样做，它将继续你的表格。谢谢
var login = new function()
        {
            var name = null ;

            this.validation = function()
            {
                this.name = document.getElementById("Username").value;
                document.getElementById("demo").innerHTML = this.name;
                return false;
            };
        };

我们发现javascript验证失败，您需要返回false。如果你不这样做，它将继续你的表格。谢谢
var login = new function()
        {
            var name = null ;

            this.validation = function()
            {
                this.name = document.getElementById("Username").value;
                document.getElementById("demo").innerHTML = this.name;
                return false;
            };
        };

问题不在您提供的代码中。请使用堆栈片段（[]
工具栏按钮）使用runnable演示问题更新您的问题。旁注：您不需要按钮上的type=“submit”
元素submit
是他们的默认类型。谢谢，我做了一些更改，但仍然没有在HTML页面中显示值。为什么要在标记中显示某些内容#演示是H1，下面是您的代码：我已经更改了提交的工作方式，但它也应该这样做……而且工作正常。如果有任何问题，您应该向验证函数添加return false
，这样表单就不会立即提交。问题不在于您提供的代码。请使用堆栈片段（[]
工具栏按钮）使用runnable演示问题更新您的问题。旁注：您不需要按钮上的type=“submit”
元素submit
是他们的默认类型。谢谢，我做了一些更改，但仍然没有在HTML页面中显示值。为什么要在标记中显示某些内容#演示是H1，下面是您的代码：我已经更改了提交的工作方式，但它也应该这样做……而且工作正常。如果有任何问题，您应该将return false
添加到验证函数中，以便表单不会立即提交。