如何使用 Javascript 访问链接？答案

【问题标题】：How to go to a link with using Javascript?如何使用 Javascript 访问链接？
【发布时间】：2018-11-18 18:40:18
【问题描述】：

您好，我有这段代码使用 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" 它也不起作用......

你能帮帮我吗？

非常感谢！

【问题讨论】：

您是否尝试过<form action="test.html" id="signup-form" @submit.prevent="processForm">，将action="test.html" 添加到form（而不是button）
请注意，您的test.html 需要能够处理您的form 字段，这应该在服务器端完成以实现合理的登录安全。
我试过但没有效果... :/
Adding an onclick function to go to url in JavaScript?的可能重复
请注意，由于您使用的是 vue.js，因此您的 processForm 需要将 vue 模型 data: 发送到服务器，或者以其他方式保存它（可能是 SessionStorage？），因为当您这样做时window.location = "test.html"; 在 aStewartDesign 的回答中，您的代码在其中执行的整个 JS 环境将在新页面加载时被丢弃。

标签： javascript html forms vue.js

【解决方案1】：

您似乎正在尝试重定向到新页面。试试：

window.location = "test.html";

代替：

onclick="test.html";

据我所知，onclick="test.html" 所做的只是用字符串值“test.html”创建一个变量“onclick”。使用您要重定向到的 URL 设置 window.location 会将用户导航到该 URL。更多关于 window.location 的信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/location

【讨论】：