Question

我对此很新，但我想知道如何使按钮验证输入然后重定向到页面？我注意到使用onclick = ""函数使用适当的输入类型验证输入，例如电子邮件，电话。但我似乎无法做到这一点，以便在重定向到下一页之前先验证它。它要么验证但不重定向（它提交一个表单，我认为因为URL更改为像submit =？）或者它只是重定向到下一页而没有任何验证

按钮：

<button id ="button" class="subscribe btn btn-success btn-lg btn-block">Proceed to Payment</button>

使用Javascript：

document.getElementById("button").onclick = function () {
    location.href = "payment.html";
};

如果我删除"location.href = "payment.html";它执行验证但从不重定向，那么目前根本没有进行任何验证，只是将其重定向到下一页“payment.html”。我猜测默认的onclick函数是执行html5验证的函数，我想我希望在重定向到下一页之前发生这种情况。

如果它很冗长我很抱歉，如果有人可以帮助我，我会非常感激。谢谢！

Answer 1

有两个选项html5和javascript，您可以使用required属性，以防您想要强制使用任何字段，并提交for action属性对于操作，对于您必须使用javascript的自定义错误消息，下面是一个用于验证和提交表单的简单演示，用于高级示例，并使用javascript进行验证，使用regex和其他方法查看{ {3}}

＆＃13;

body {
  font: 1em sans-serif;
  padding: 0;
  margin: 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p>label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
  /* required to properly style form 
   elements on WebKit based browsers */
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #333;
  margin: 0;
  font-family: inherit;
  font-size: 90%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}

＆＃13;

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation -->

<form action="https://google.com">
  <p>
    <fieldset>
      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
    </fieldset>
  </p>
  <p>
    <label for="n1">How old are you?</label>
    <!-- The pattern attribute can act as a fallback for browsers which
         don't implement the number input type but support the pattern attribute.
         Please note that browsers that support the pattern attribute will make it
         fail silently when used with a number field.
         Its usage here acts only as a fallback -->
    <input type="number" min="12" max="120" step="1" id="n1" name="age" pattern="\d+">
  </p>
  <p>
    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
    <input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Banana</option>
      <option>Cherry</option>
      <option>Apple</option>
      <option>Strawberry</option>
      <option>Lemon</option>
      <option>Orange</option>
    </datalist>
  </p>
  <p>
    <label for="t2">What's your e-mail?</label>
    <input type="email" id="t2" name="email">
  </p>
  <p>
    <label for="t3">Leave a short message</label>
    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

＆＃13;

Answer 2

嘿伙计们抱歉这个混乱！

我忽略了表单操作标记，我可以将网址重定向到下一页。谢谢你的帮助！

如何进行html5验证然后重定向到另一个页面？

2 个答案: