我正在制作注册表;如果字段未通过验证测试，则进行验证，例如- 如果我没有输入名字，它会发出警报，但同时它会为所有空字段发出警报。我只想将控件发送到未通过验证测试的字段。在本例中为"名字"。这是我的代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Assignment-2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>
<body style="background-color:powderblue;">
<h3>
<marquee style="color : Green;">Please Fill all the details correctly</marquee>
</h3><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-md-2"></div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-12 col-md-12">
<h3 class="align-middle">Registration Form</h3>
</div>
<div class="col-sm-12 col-md-12">
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="fName">First Name:</label>
<input type="text" class="form-control" id="firstname" placeholder="Eg - Michael">
</div>
<div class="col-sm-12 col-md-6">
<label for="lName">Last Name:</label>
<input type="text" class="form-control" id="lastname" placeholder="Eg - Clarke">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Eg-M.c@gmail.com">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Email:</label>
<input type="email" class="form-control" id="confirm_email" placeholder="type again">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Password:</label>
<input type="Password" class="form-control" id="password" placeholder="">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Password:</label>
<input type="Password" class="form-control" id="confirm_password" placeholder="">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="ml-sm-3 ml-md-3"></div>
<label for="Gender">Gender:</label>
<div class="row">
<div class="ml-sm-3 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Male">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Male" checked>Male
</label>
</div>
<div class="ml-sm-4 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Female">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Female">Female
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<label for="D.O.R">Date of Registration:</label><br>
<input type="date" class="form-control" id="date" placeholder="23/07/2018">
<p id="date"></p>
<script>
function myFunction() {
var x = document.getElementById("Date").value;
document.getElementById("Date").innerHTML = x;
}
</script>
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkbox" value="check">
I Accept all Terms and Conditions
</label>
</div>
<div class="row text-center">
<div class="col-sm-12 col-md-12">
<button id="but" onclick="return btnvalidate();">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-2"></div>
</div>
</div>
<script>
function btnvalidate() {
var fname = document.getElementById("firstname").value
if (fname.length == 0) {
alert('First Name cannot be Empty');
}
var lname = document.getElementById("lastname").value
if (lname.length == 0) {
alert('Last Name cannot be Empty');
}
var email = document.getElementById("email").value
if (email.length == 0) {
alert('email cannot be empty!')
}
var confirm_email = document.getElementById("confirm_email").value
if (confirm_email.length == 0) {
alert('You NEED to confirm the email!')
}
if (email != confirm_email) {
alert('Email Not Matching! Try again');
}
var password = document.getElementById("password").value
if (password.length == 0) {
alert('password cannot be empty!')
}
var confirm_password = document.getElementById("confirm_password").value
if (password != confirm_password) {
alert('Password Not Matching! Try again');
}
var date = document.getElementById("date").value
if (date.length == 0) {
alert('Date of Registeration cannot be empty!');
}
alert($("input[name='optradio']:checked").val());
if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
}
}
</script>
</body>
</html>你只需要像这样把return放在每个if语句的正文中
<!DOCTYPE HTML>
<html>
<head>
<title>Assignment-2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>
<body style="background-color:powderblue;">
<h3>
<marquee style="color : Green;">Please Fill all the details correctly</marquee>
</h3><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-md-2"></div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-12 col-md-12">
<h3 class="align-middle">Registration Form</h3>
</div>
<div class="col-sm-12 col-md-12">
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="fName">First Name:</label>
<input type="text" class="form-control" id="firstname" placeholder="Eg - Michael">
</div>
<div class="col-sm-12 col-md-6">
<label for="lName">Last Name:</label>
<input type="text" class="form-control" id="lastname" placeholder="Eg - Clarke">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Eg-M.c@gmail.com">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Email:</label>
<input type="email" class="form-control" id="confirm_email" placeholder="type again">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Password:</label>
<input type="Password" class="form-control" id="password" placeholder="">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Password:</label>
<input type="Password" class="form-control" id="confirm_password" placeholder="">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="ml-sm-3 ml-md-3"></div>
<label for="Gender">Gender:</label>
<div class="row">
<div class="ml-sm-3 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Male">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Male" checked>Male
</label>
</div>
<div class="ml-sm-4 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Female">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Female">Female
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<label for="D.O.R">Date of Registration:</label><br>
<input type="date" class="form-control" id="date" placeholder="23/07/2018">
<p id="date"></p>
<script>
function myFunction() {
var x = document.getElementById("Date").value;
document.getElementById("Date").innerHTML = x;
}
</script>
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkbox" value="check">
I Accept all Terms and Conditions
</label>
</div>
<div class="row text-center">
<div class="col-sm-12 col-md-12">
<button id="but" onclick="return btnvalidate();">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-2"></div>
</div>
</div>
<script>
function btnvalidate() {
var fname = document.getElementById("firstname").value
if (fname.length == 0) {
alert('First Name cannot be Empty'); return
return
}
var lname = document.getElementById("lastname").value
if (lname.length == 0) {
alert('Last Name cannot be Empty'); return
}
var email = document.getElementById("email").value
if (email.length == 0) {
alert('email cannot be empty!'); return
}
var confirm_email = document.getElementById("confirm_email").value
if (confirm_email.length == 0) {
alert('You NEED to confirm the email!'); return
}
if (email != confirm_email) {
alert('Email Not Matching! Try again'); return
}
var password = document.getElementById("password").value
if (password.length == 0) {
alert('password cannot be empty!'); return
}
var confirm_password = document.getElementById("confirm_password").value
if (password != confirm_password) {
alert('Password Not Matching! Try again'); return
}
var date = document.getElementById("date").value
if (date.length == 0) {
alert('Date of Registeration cannot be empty!');
}
alert($("input[name='optradio']:checked").val());
if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
}
}
</script>
</body>
</html>你甚至不需要Javascript——浏览器有内置的验证功能。只需将属性required添加到那些不能为空的字段中即可。
我已将您的示例简化为基本必需品来证明这一点：
body {
background-color: powderblue;
}<form>
<div>
<label for="fName">First Name:</label>
<input type="text" id="firstname" placeholder="Eg - Michael" required>
</div>
<div>
<label for="lName">Last Name:</label>
<input type="text" id="lastname" placeholder="Eg - Clarke" required>
</div>
<div>
<button type="submit" id="but">Submit</button>
</div>
</form>