堆栈内存溢出
  繁体   English   中英

如何解决 javascript 重定向问题？

[英]How to solve javascript redirection problem?

 原文  2020-07-10 05:56:25  3   4    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 个解决方案

解决方案1
 1 已采纳  2020-07-10 06:10:04

引用链接按钮类型提交/按钮

 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>

解决方案2
 0  2020-07-10 06:09:42

你需要添加事件 preventdefault 我认为

解决方案3
 0  2020-07-10 06:52:24

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';
}  });

解决方案4
 0  2020-07-10 12:21:57

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

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

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

以下是您需要更改的内容：

  • 您无需定义点击事件，而是定义一个独立的验证 function (= myValidator() )，一旦满足所有条件，它就会返回true ，直到返回false 。 无论如何，这是更好的好习惯，因为您可以独立于点击事件来调用它。
  • 将form的action设置为所需的 URL （= redirect.html ）
  • 将myValidator()的return转发到form上的onsubmit事件

 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 }
 <:--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>

另请注意，现在可以通过使用所需的属性以及其他漂亮的表单功能来防止空输入，并使用伪 CSS 类进行相应的样式设置。 

 <form class="input" action="redirect.html"> <input class="input-field" id="fname" placeholder="First Name" type="text" required> <input class="input-field" id="lname" placeholder="Last Name" type="text" required> <input class="input-field" id="dob" placeholder="Date of Birth" type="date" required> <input class="input-field" id="ph-no" placeholder="Phone Number" type="text" required> <input class="input-field" id="email" placeholder="Email ID" type="email" required> <input class="input-field" id="password" placeholder="Enter Password" type="password" required> <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password" required> <button class="btn" id="sub-btn" type="submit">SIGN UP</button> </form>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何解决这个JavaScript问题？ 如何解决这个递归问题（Javascript） 如何使用 Javascript 解决此问题 如何解决 JavaScript 中的以下问题？ 如何解决 javascript 中的收音机问题？ 我如何解决 Javascript Fetch 的问题 如何解决JavaScript中的实时交易问题？ 如何解决这个模数运算符不准确的问题javascript？ javascript这个顺序异步任务问题怎么解决？ 如何使用 Javascript 解决多个粘性标题问题？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM