如何使用Javascript转到链接?

时间:2018-06-08 16:42:22

标签: javascript html forms vue.js

你好我有这个代码使用javascript& html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Signup Form</title>

  <!-- css -->
  <link rel="stylesheet" href="style.css">
  <style>
    .box {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>

  <!-- js -->
  <script src="https://unpkg.com/vue"></script>
</head>
<body>

  <div class="hero is-fullheight is-info is-bold">
  <div class="hero-body">
  <div class="container">
    <h1 class="title has-text-centered">Test</h1>
    <div class="box">

      <!-- our signup form ===================== -->
      <form id="signup-form" @submit.prevent="processForm">
        <!-- name -->
        <div class="field">
          <label class="label">Username</label>
          <input 
            type="text"
            class="input" 
            name="name"
            v-model="name">
        </div>

        <!-- email -->
        <div class="field">
          <label class="label">Password</label>
          <input 
            type="password" 
            class="input" 
            name="email" 
            v-model="email"
            @blur="validateEmail">

          <p class="help is-danger" v-if="errors.email">
            Please enter a valid email.
          </p>
        </div>

        <!-- submit button -->
        <div class="field has-text-right">
          <button type="submit" class="button is-danger">
            Log In           
          </button>
        </div>
      </form>

    </div>
  </div>
  </div>
  </div>


  <script>

    var app = new Vue({
      el: '#signup-form',
      data: {
        name: '',
        email: '',
        errors: {
          name: false,
          email: false
        }
      },
      methods: {
        processForm: function() {
          console.log({ name: this.name, email: this.email });
          onclick="test.html"; 

        },
        validateEmail: function() {
          const isValid = window.isValidEmail(this.email);
          this.errors.email = !isValid;
        }
      }
    });

    function isValidEmail(email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  </script>
</body>
</html>

我希望当我点击按钮时,我可以使用test.html的名称转到页面,我尝试使用href = "test.html,但它不起作用。我想我必须在Javascrit中编写它,但即使使用action = "test.html"它也不起作用......

你能帮我吗?

非常感谢!

1 个答案:

答案 0 :(得分:0)

您尝试做的似乎是重定向到新页面。尝试:

window.location = "test.html";

而不是:

onclick="test.html";
据我所知,所有onclick =&#34; test.html&#34;确实是创建一个变量&#34; onclick&#34;使用字符串值&#34; test.html&#34;。使用您要重定向到的URL设置window.location将导航用户到该URL。有关window.location的更多信息,请访问:https://developer.mozilla.org/en-US/docs/Web/API/Window/location