如何解决JavaScript重定向问题？

时间：2020-07-10 05:56:25

标签： javascript redirect

我正在尝试使用javascript进行客户端验证，并且所有内容都正常运行，只是它不会重定向到另一页-> redirect.html

点击警报弹出窗口后，它会再次加载index.html。

document.getElementById('sub-btn').addEventListener('click', function() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var yearBirth = document.getElementById('dob').value;
var phoneNum = document.getElementById('ph-no').value;
var emailID = document.getElementById('email').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('re-password').value;

if (firstName.length === 0) {
    alert('Enter the first name!');
}else if (lastName.length === 0) {
    alert('Enter the last name!');
}else if (yearBirth.length === 0) {
    alert('Enter date of birth!');
}else if (phoneNum.length === 0) {
    alert('Enter the phone number!');
}else if (phoneNum.length > 10) {
    alert('Check phone number!');
}else if (emailID.length === 0) {
    alert('Enter the email ID !');
}else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
    alert('Enter the password!');
}else if (rePassword.length === 0) {
    alert('Re-enter the password!');
}else {
    alert('Redirecting to another page....');
    window.location = 'redirect.html';
}  });
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Sign Up</title>
</head>
<body>
    <div class="main">
        <div class="form-box">
            <form class="input">
                <input class="input-field" id="fname" placeholder="First Name" type="text">
                <input class="input-field" id="lname" placeholder="Last Name" type="text">
                <input class="input-field" id="dob" placeholder="Date of Birth" type="date">
                <input class="input-field" id="ph-no" placeholder="Phone Number" type="text">
                <input class="input-field" id="email" placeholder="Email ID" type="email">
                <input class="input-field" id="password" placeholder="Enter Password" type="password">
                <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password">
                <button class="btn" id="sub-btn" type="submit">SIGN UP</button>
            </form>
        </div>
    </div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>

4 个答案:

答案 0 :(得分：1)

引用链接button type submit/button 

document.getElementById('sub-btn').addEventListener('click', function() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var yearBirth = document.getElementById('dob').value;
var phoneNum = document.getElementById('ph-no').value;
var emailID = document.getElementById('email').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('re-password').value;

if (firstName.length === 0) {
    alert('Enter the first name!');
}else if (lastName.length === 0) {
    alert('Enter the last name!');
}else if (yearBirth.length === 0) {
    alert('Enter date of birth!');
}else if (phoneNum.length === 0) {
    alert('Enter the phone number!');
}else if (phoneNum.length > 10) {
    alert('Check phone number!');
}else if (emailID.length === 0) {
    alert('Enter the email ID !');
}else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
    alert('Enter the password!');
}else if (rePassword.length === 0) {
    alert('Re-enter the password!');
}else {
    alert('Redirecting to another page....');
    window.location = 'redirect.html';
}  });
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Sign Up</title>
</head>
<body>
    <div class="main">
        <div class="form-box">
            <form class="input">
                <input class="input-field" id="fname" placeholder="First Name" type="text">
                <input class="input-field" id="lname" placeholder="Last Name" type="text">
                <input class="input-field" id="dob" placeholder="Date of Birth" type="date">
                <input class="input-field" id="ph-no" placeholder="Phone Number" type="text">
                <input class="input-field" id="email" placeholder="Email ID" type="email">
                <input class="input-field" id="password" placeholder="Enter Password" type="password">
                <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password">
                <button class="btn" id="sub-btn" type="button">SIGN UP</button>
            </form>
        </div>
    </div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>

答案 1 :(得分：0)

我认为您需要添加事件preventdefault

答案 2 :(得分：0)

document.getElementById('sub-btn').addEventListener('click', function(e) {
e.preventDefault()
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var yearBirth = document.getElementById('dob').value;
var phoneNum = document.getElementById('ph-no').value;
var emailID = document.getElementById('email').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('re-password').value;

if (firstName.length === 0) {
    alert('Enter the first name!');
}else if (lastName.length === 0) {
    alert('Enter the last name!');
}else if (yearBirth.length === 0) {
    alert('Enter date of birth!');
}else if (phoneNum.length === 0) {
    alert('Enter the phone number!');
}else if (phoneNum.length > 10) {
    alert('Check phone number!');
}else if (emailID.length === 0) {
    alert('Enter the email ID !');
}else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
    alert('Enter the password!');
}else if (rePassword.length === 0) {
    alert('Re-enter the password!');
}else {
    alert('Redirecting to another page....');
    window.location = 'redirect.html';
}  });

答案 3 :(得分：0)

form通过使用属性action已经具有内置的重定向功能，如果需要的话，它还具有将数据实际发布到所需链接的好处。

此外，form有一个事件onsubmit，该事件在提交表单之前已执行，可以通过返回false来取消。

由于代码的所有上述要求已经由form的默认行为给出，因此没有理由不使用它。

这是您需要更改的内容：

  • 您可以定义独立的验证，而不是定义点击事件 函数（= myValidator()），在满足所有条件后返回true，并且 false直到。无论如何，这是更好的良好做法，因为您可以称之为 与点击事件无关。
  • 将action中的form设置为所需的URL（= {redirect.html）
  • 将return的{​​{1}}转发到myValidator()上的onsubmit事件

form
function myValidator(){
  //REM: returns true once valid, false until.
  var tReturn = true;

  var firstName = document.getElementById('fname').value;
  var lastName = document.getElementById('lname').value;
  var yearBirth = document.getElementById('dob').value;
  var phoneNum = document.getElementById('ph-no').value;
  var emailID = document.getElementById('email').value;
  var password = document.getElementById('password').value;
  var rePassword = document.getElementById('re-password').value;

  if (firstName.length === 0) {
      alert('Enter the first name!');
      tReturn = false
  }else if (lastName.length === 0) {
      alert('Enter the last name!');
      tReturn = false
  }else if (yearBirth.length === 0) {
      alert('Enter date of birth!');
      tReturn = false
  }else if (phoneNum.length === 0) {
      alert('Enter the phone number!');
      tReturn = false
  }else if (phoneNum.length > 10) {
      alert('Check phone number!');
      tReturn = false
  }else if (emailID.length === 0) {
      alert('Enter the email ID !');
      tReturn = false
  }else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
      alert('Enter the password!');
      tReturn = false
  }else if (rePassword.length === 0) {
      alert('Re-enter the password!');
      tReturn = false
  };

  return tReturn
}

还要注意，如今可以通过使用属性required以及其他漂亮的表单功能来防止空输入，并使用伪CSS类来相应地设置其样式。

<!--REM: It is better practise to assign those events using javascript - I merely leave it here to point put the event/difference -->
<form class="input" action="redirect.html" onsubmit="return myValidator()">
    <input class="input-field" id="fname" placeholder="First Name" type="text">
    <input class="input-field" id="lname" placeholder="Last Name" type="text">
    <input class="input-field" id="dob" placeholder="Date of Birth" type="date">
    <input class="input-field" id="ph-no" placeholder="Phone Number" type="text">
    <input class="input-field" id="email" placeholder="Email ID" type="email">
    <input class="input-field" id="password" placeholder="Enter Password" type="password">
    <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password">
    <button class="btn" id="sub-btn" type="submit">SIGN UP</button>
</form>

相关问题
最新问题