例如 - 如果用户开始输入密码但尚未输入电子邮件，则立即显示消息 - "首先输入电子邮件ID"。 我正在使用bootstrap4和jQuery/Javascript.光标应该到达发现错误的字段。除此之外，当满足所有验证时，当我单击"提交"按钮时，如何重定向到另一个页面。我尝试在 HTML 中使用锚标签在单击按钮时进行重定向，这显然会导致重定向到链接而不是检查验证。我尝试使用window.location方法，但它没有给出任何响应。
<!DOCTYPE html>
<html>
<head>
<title>Three Forms</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body style="background-color : grey">
<div class="container" style="background-color: green;padding-bottom: 2%;">
<div style="background-color:black;">
<h2><b>Forms</b></h2>
</div>
<div class="row" style="margin-top:3%;">
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left: 4%;margin-right: 3%;margin-bottom:3%;">
<form class="form-A" id="form-A">
<div style="background: linear-gradient(to top left, #ff9999 0%, #ff9966 35%); height: 100px; text-align : center; color:white;">
<h3><b>Log In</b></h3>
<a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i></a>
<a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a>
</div>
<div style="padding: 4%;">
<div class="form-sm">
<input type="Email" id="email1" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="form-sm">
<input type="Password" id="password1" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-right mt-4">
<a class="btn btn-link" href="https://www.google.com" style="color:grey;font-size:normal;">Forgot Password?</a>
</div>
<div class="text-left mt-4" style="font-size:8px;font-weight: normal;">
<button class="btn btn-primary" id="login" style="Background-color:grey; border-radius:25px;" onclick="return form1validations() ">
Log In<i class="fa fa-paper-plane-o ml-1"></i></button>
<span style="color:grey;">Don't have an account?</span>
<a class="btn btn-link" href="Sign Up" style="text-align : Right;color:black; font-size:10px;">Sign up?</a>
</div>
<div class="pb-4"></div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left:4%;margin-right:3%;margin-bottom:3%;">
<form id="form-B" style="padding-left:4%;padding-right:3%;margin-left:-4%;margin-right:-3%;">
<h3 style="color:#cc00cc;text-align : center;"><b>Sign Up</b></h3>
<div class="md-form form-sm" style="padding: 3%;">
<div class="mb-5"></div>
<input type="Email" id="email2" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="md-form form-sm" style="padding: 3%;margin-top:-6%">
<input type="Password" id="password2" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-left mt-4" style="color:grey;font-size:15px;font-weight: normal;">
<input type="checkbox" id="checkbox" style="color:grey;font-size:15px;font-weight: normal;"> Accept the<a href="https://amazon.com">Terms and Conditions</a>
</div>
<div class="text-left mt-4" style="font-size:9px;font-weight: normal;">
<button class="btn btn-primary" id="signup" style="background-color : DeepPink;border-radius:25px;" onclick="return form2validations()">Sign Up
<i class="fa fa-paper-plane-o ml-1"></i></button>
<span style="color:grey;">have an account?</span>
<a class="btn btn-link" href="Log In" style="text-align : Right; font-size:9px;">Log In?</a>
</div>
<div class="mb-4"></div>
<div style="background: linear-gradient(to top, #666699 100%, #666699 0%); height: 100px; text-align : center; color:white;"><br><br>
<a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i>
</a><a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;margin-left: 4%;margin-right:3%;padding:top:0.5%;margin-bottom:3%; ">
<form id="form-C">
<h3 style="text-align : center;"><b>Sign In </b></h3>
<div class="md-form form-sm" style="padding-top:1%;">
<div class="mb-5"></div>
<input type="Email" id="email3" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="md-form form-sm">
<input type="Password" id="password3" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-right mt-4">
<a class="btn btn-link" href="https://www.gmail.com">Forgot Password?</a>
</div>
<div class="text-center p-4">
<button class="btn btn-primary" id="signin" style="width : 85%;border-radius:25px;" onclick="return form3validations()">Sign In
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
</div>
<div style="color:grey;text-align : center;font-size:15px;">or sign in with:</div>
<div class="mb-2"></div>
<div style="text-align:center;color:Blue;">
<a href="https://www.facebook.com" class="btn btn-link" style="background-color: lightgrey;width:15%;
border-radius:25%;" role="button">
<i class="fa fa-facebook"></i></a>
<a href="https://www.twitter.com" class="btn btn-link" style="background-color:lightgrey;width:15%;
border-radius:25%;" role="button">
<i class="fa fa-twitter"></i></a>
<a href="https://www.plus.google.com" class="btn btn-link" style="background-color: lightgrey;width:15%;
border-radius:25%;" role="button"><i class="fa fa-google-plus"></i></a>
</div>
</form>
</div>
</div>
<div class="mb-3"></div>
<script>
function form1validations() {
var email1 = document.getElementById("email1").value;
var password1 = document.getElementById("password1").value;
var mail1 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd1 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email1.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email1.match(mail1)) {
return;
} else if (password1.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password1.match(pswd1)) {
alert('password is incorrect!')
return false;
} else {
alert('you are sucessfully Logged in!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
function form2validations() {
var email2 = document.getElementById("email2").value;
var password2 = document.getElementById("password2").value;
var mail2 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd2 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email2.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email2.match(mail2)) {
return;
} else if (password2.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password2.match(pswd2)) {
alert('password is incorrect!')
return false;
} else if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
} else {
alert('Sign Up successful!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
function form3validations() {
var email3 = document.getElementById("email3").value;
var password3 = document.getElementById("password3").value;
var mail3 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd3 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email3.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email3.match(mail3)) {
return;
} else if (password3.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password3.match(pswd3)) {
alert('password is incorrect!')
return false;
} else {
alert('you are sucessfully Signed In!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
</script>
</body>
</html>我为您制作了一个简单的表格来完成这项工作。
我使用Element.scrollTo()方法来向用户显示哪个字段是必需的。
let checkFill = el => {
let siblings = [...el.parentNode.children];
let bool = true;
if(siblings.indexOf(el) !== 0) {
for(let s of siblings) {
if(s !== el) {
if(s.value.length === 0) {
alert('Fill out the previous fields first!');
window.scrollTo(0, s.offsetTop);
s.focus();
bool = false;
break;
}
} else break;
}
}
return bool;
};
let redirect = bool => {
if(bool) {
window.location.href = 'https://stackoverflow.com/';
console.log(window.location.href);
}
};input {
display: block;
height: 40px;
width: 75vw;
margin: 20vh auto;
font-size: 20pt;
}
button {
height: 80px;
width: 400px;
margin: 10vh;
font-size: 20pt;
}<form>
<input type='email' onFocus='checkFill(this);' required/>
<input type='password' onFocus='checkFill(this);' required/>
<input type='number' onFocus='checkFill(this);' required/>
<button id='btn' onClick='redirect(checkFill(this));'>Log In</button>
</form>看看下面的代码片段，当您专注于输入字段时，我在其中添加了验证。对表格 1 进行精细检查。我不得不删除验证函数中的焦点，否则它会陷入循环。此外，我建议您在集中输入和提交表单时创建单独的验证。
<!DOCTYPE html>
<html>
<head>
<title>Three Forms</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body style="background-color : grey">
<div class="container" style="background-color: green;padding-bottom: 2%;">
<div style="background-color:black;">
<h2><b>Forms</b></h2>
</div>
<div class="row" style="margin-top:3%;">
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left: 4%;margin-right: 3%;margin-bottom:3%;">
<form class="form-A" id="form-A">
<div style="background: linear-gradient(to top left, #ff9999 0%, #ff9966 35%); height: 100px; text-align : center; color:white;">
<h3><b>Log In</b></h3>
<a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i></a>
<a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a>
</div>
<div style="padding: 4%;">
<div class="form-sm">
<input type="Email" id="email1" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="form-sm">
<input onfocus="form1validations()" type="Password" id="password1" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-right mt-4">
<a class="btn btn-link" href="https://www.google.com" style="color:grey;font-size:normal;">Forgot Password?</a>
</div>
<div class="text-left mt-4" style="font-size:8px;font-weight: normal;">
<button class="btn btn-primary" id="login" style="Background-color:grey; border-radius:25px;" onclick="return form1validations() ">
Log In<i class="fa fa-paper-plane-o ml-1"></i></button>
<span style="color:grey;">Don't have an account?</span>
<a class="btn btn-link" href="Sign Up" style="text-align : Right;color:black; font-size:10px;">Sign up?</a>
</div>
<div class="pb-4"></div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left:4%;margin-right:3%;margin-bottom:3%;">
<form id="form-B" style="padding-left:4%;padding-right:3%;margin-left:-4%;margin-right:-3%;">
<h3 style="color:#cc00cc;text-align : center;"><b>Sign Up</b></h3>
<div class="md-form form-sm" style="padding: 3%;">
<div class="mb-5"></div>
<input type="Email" id="email2" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="md-form form-sm" style="padding: 3%;margin-top:-6%">
<input type="Password" id="password2" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-left mt-4" style="color:grey;font-size:15px;font-weight: normal;">
<input type="checkbox" id="checkbox" style="color:grey;font-size:15px;font-weight: normal;"> Accept the<a href="https://amazon.com">Terms and Conditions</a>
</div>
<div class="text-left mt-4" style="font-size:9px;font-weight: normal;">
<button class="btn btn-primary" id="signup" style="background-color : DeepPink;border-radius:25px;" onclick="return form2validations()">Sign Up
<i class="fa fa-paper-plane-o ml-1"></i></button>
<span style="color:grey;">have an account?</span>
<a class="btn btn-link" href="Log In" style="text-align : Right; font-size:9px;">Log In?</a>
</div>
<div class="mb-4"></div>
<div style="background: linear-gradient(to top, #666699 100%, #666699 0%); height: 100px; text-align : center; color:white;"><br><br>
<a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i>
</a><a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;margin-left: 4%;margin-right:3%;padding:top:0.5%;margin-bottom:3%; ">
<form id="form-C">
<h3 style="text-align : center;"><b>Sign In </b></h3>
<div class="md-form form-sm" style="padding-top:1%;">
<div class="mb-5"></div>
<input type="Email" id="email3" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="md-form form-sm">
<input type="Password" id="password3" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-right mt-4">
<a class="btn btn-link" href="https://www.gmail.com">Forgot Password?</a>
</div>
<div class="text-center p-4">
<button class="btn btn-primary" id="signin" style="width : 85%;border-radius:25px;" onclick="return form3validations()">Sign In
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
</div>
<div style="color:grey;text-align : center;font-size:15px;">or sign in with:</div>
<div class="mb-2"></div>
<div style="text-align:center;color:Blue;">
<a href="https://www.facebook.com" class="btn btn-link" style="background-color: lightgrey;width:15%;
border-radius:25%;" role="button">
<i class="fa fa-facebook"></i></a>
<a href="https://www.twitter.com" class="btn btn-link" style="background-color:lightgrey;width:15%;
border-radius:25%;" role="button">
<i class="fa fa-twitter"></i></a>
<a href="https://www.plus.google.com" class="btn btn-link" style="background-color: lightgrey;width:15%;
border-radius:25%;" role="button"><i class="fa fa-google-plus"></i></a>
</div>
</form>
</div>
</div>
<div class="mb-3"></div>
<script>
function form1validations() {
var email1 = document.getElementById("email1").value;
var password1 = document.getElementById("password1").value;
var mail1 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd1 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email1.length == 0) {
document.getElementById("password1").blur();
document.getElementById("email1").focus();
alert('email cannot be empty!');
return;
} else if (!email1.match(mail1)) {
return;
}
}
function form2validations() {
var email2 = document.getElementById("email2").value;
var password2 = document.getElementById("password2").value;
var mail2 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd2 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email2.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email2.match(mail2)) {
return;
} else if (password2.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password2.match(pswd2)) {
alert('password is incorrect!')
return false;
} else if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
} else {
alert('Sign Up successful!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
function form3validations() {
var email3 = document.getElementById("email3").value;
var password3 = document.getElementById("password3").value;
var mail3 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd3 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email3.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email3.match(mail3)) {
return;
} else if (password3.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password3.match(pswd3)) {
alert('password is incorrect!')
return false;
} else {
alert('you are sucessfully Signed In!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
</script>
</body>
</html>