Javascript 表单验证后如何重定向？_Javascript_Html_Validation

Javascript 表单验证后如何重定向？

javascript html validation

Javascript 表单验证后如何重定向？,javascript,html,validation,Javascript,Html,Validation,我正在尝试在表单验证脚本运行后设置重定向。但当我单击“提交”时，它会抛出一个有效的电子邮件错误，然后重定向跳过我的验证检查目前，我已经尝试在js文件的底部添加函数。但它在没有运行验证的情况下重定向 HTML <button class="popup-button" onclick="openForm()">Open Form</button> <div class="form-popup" id="form"> <form id="form" onsu

我正在尝试在表单验证脚本运行后设置重定向。但当我单击“提交”时，它会抛出一个有效的电子邮件错误，然后重定向跳过我的验证检查

目前，我已经尝试在js文件的底部添加函数。但它在没有运行验证的情况下重定向

HTML
<button class="popup-button" onclick="openForm()">Open Form</button>
<div class="form-popup" id="form">
<form id="form" onsubmit="return formValidate(event)">
<p>
<input type="text" id="e-mail" placeholder="Email" />
</p><p>
<input type="password" id="pswd" placeholder="Password" />
</p>
<br>
<input id="submitButton" type="submit" class="submit" 
onclick="redirect()">
 <br>
<button type="button" class="btn cancel" 
onclick="closeForm()">Close</button>
</form>

JS
  function formValidate(event) {
event.preventDefault();
var form = document.getElementById('form');
var email = document.getElementById('e-mail').value;
var password = document.getElementById('pswd').value;

var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

var emailResult = emailRGEX.test(email);
//validate Email
if(emailResult == false){
alert("Please enter a valid email address");
return false;
}

//validate lower case
var lowerCaseLetters = /[a-z]/g;
if(password.match(lowerCaseLetters) == null) {
  alert("Password needs a lower case!");
  return false;
}

//validate upper case
var upperCaseLetters = /[A-Z]/g;
if(password.match(upperCaseLetters) == null){
  alert("Password needs an upper case!");
  return false;
}

//validate numbers
var numbers = /[0-9]/g;
if(password.match(numbers) == null){
  alert("Password needs a number!");
  return false;
}
//validate special characters
 var special = /[!@#$%^&*(),.?":{}|<>]/g;
 if(password.match(special) == null){
alert("Password needs a special character!");
return false;
}
 //validate password length
 if(password.length<8) {
alert("Password needs to be at least 8 characters");
return false;
}

form.submit();

 }
function redirect(){
window.location.href="thankyou.html";
}

HTML
开放式







接近
JS
函数formValidate（事件）{
event.preventDefault（）；
var form=document.getElementById（'form'）；
var email=document.getElementById（'e-mail'）。值；
var password=document.getElementById（'pswd'）。值；
var emailRGEX=/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+*（\.\w{2,3}）+$/；
var emailResult=emailRGEX.test（电子邮件）；
//验证电子邮件
如果（emailResult==false）{
警报（“请输入有效的电子邮件地址”）；
返回false；
}
//验证小写
var lowerCaseLetters=/[a-z]/g；
if（password.match（小写字母）==null）{
警报（“密码需要小写！”；
返回false；
}
//验证大写字母
var大写字母=/[A-Z]/g；
if（password.match（大写字母）==null）{
警报（“密码需要大写！”）；
返回false；
}
//验证数字
变量数=/[0-9]/g；
if（password.match（number）==null）{
警报（“密码需要一个数字！”）；
返回false；
}
//验证特殊字符
var special=/[！@$%^&*（），.？“：{}|]/g；
if（password.match（特殊）==null）{
警报（“密码需要特殊字符！”）；
返回false；
}
//验证密码长度
if（password.length将重定向放在form.submit之前的验证函数中

<!DOCTYPE html>
<html>
<head>
<script>
 function validateForm() {
 var x = document.forms["myForm"]["fname"].value;
 if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="b.html" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

函数validateForm（）{
var x=document.forms[“myForm”][“fname”].value；
如果（x==“”）{
警告（“必须填写姓名”）；
返回false；
}
}
姓名：

请找到给定的示例
并确保b.html也在同一文件夹中。如果要从javascript调用另一个html，请在成功验证后使用window.location.href=url
希望这能对您有所帮助。感谢您在注意到您有更大的问题后删除了回答。您的第一个问题是您没有在代码中的任何地方实际调用formValidate（）
函数。其次，如果您提交表单，页面将刷新，并且重定向（）
函数将不会被调用。您需要在上面的代码中进行条件检查，以查看表单是否已成功提交，然后才能重定向。@AndrewDaly-请将您的注释迁移到答案中，因为它值得选择为正确答案以及它可能获得的任何投票。