Validation.js
function Validation() {
var firstname = document.form.firstname;
var middlename = document.form.middlename;
var lastname = document.form.lastname;
var username = document.form.username;
var password = document.form.password;
var pass1 = document.form.pass1;
var bloodgroup = document.form.bloodgroup;
var weight = document.form.weight;
var contact = document.form.contact;
var email = document.form.email;
var address = document.form.address;
var area = document.form.area;
var city = document.form.city;
var donateblood = document.form.donateblood;
if(fname(firstname))
{
if(mname(middlename))
{
if(lname(lastname))
{
if(uname(username,5,10))
{
if(pass(password))
{
if(cpass(pass1))
{
if(bg(bloodgroup))
{
if(weight(weight,50))
{
if(contact(contact))
{
if(email(email))
{
if(address(address))
{
if(area(area))
{
if(city(city))
{
if(db(donateblood))
{
}
}
}
}
}
}
}
}
}
}
}
}
}
}
else
{
return false;
}
}
function fname(firstname)
{
var letters = /^[A-Za-z]+$/;
if(firstname.value == "" && firstname.value == letters)
{
return true;
}
else
{
alert('Firstname must have alphabet characters only');
firstname.focus();
return false;
}
}
function mname(middlename)
{
var letters = /^[A-Za-z]+$/;
if(middlename.value.match(letters) && middlename.value.length != 0)
{
return true;
}
else
{
alert('Middlename must have alphabet characters only');
middlename.focus();
return false;
}
}
function lname(lastname)
{
var letters = /^[A-Za-z]+$/;
if(lastname.value.match(letters) && lastname.value.length != 0)
{
return true;
}
else
{
alert('Lastname must have alphabet characters only');
lastname.focus();
return false;
}
}
function uname(username,mx,my)
{
var uname_len = username.value.length;
if (uname_len == 0 || uname_len >= my || uname_len < mx)
{
alert("Username should not be empty / length should be between "+mx+" to
"+my);
username.focus();
return false;
}
return true;
}
function pass(password)
{
var decimal= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).
{8,15}$/;
if(inputtxt.value.match(decimal))
{
return true;
}
else
{
alert("Password must have one uppercase letter,one digit and one special
character...");
return false;
}
}
function cpass(pass1)
{
if(password.value == pass1.value)
{
return true;
}
else
{
alert("Password does not match");
pass1.focus();
return false;
}
}
function bg(bloodgroup)
{
if(bloodgroup.value == "Select Blood Group")
{
alert("Select your Blood Group from the list");
bloodgroup.focus();
return false;
}
else
{
return true;
}
}
function weight(weight,mx) {
var numbers = /^[0-9]+$/;
var weight_kg = weight.value;
if(weight.value.match(numbers))
{
if(weight_kg > mx)
{
return true;
}
else
{
alert("Weight must be greater than 50 kg");
return false;
}
return true;
}
else
{
alert("Weight must have numeric characters only");
weight.focus();
return false;
}
}
function contact(contact) {
var phoneno = /^\d{10}$/;
if(contact.value.match(phoneno))
{
return true;
}
else
{
alert("message");
return false;
}
}
function email(email) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(email.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
email.focus();
return false;
}
}
function address(address) {
var letters = /^[0-9a-zA-Z]+$/;
if(address.value.match(letters))
{
return true;
}
else
{
alert('Address must have alphanumeric characters only');
address.focus();
return false;
}
}
function area(area) {
var letters = /^[A-Za-z]+$/;
if(area.value.match(letters))
{
return true;
}
else
{
alert('Area must have alphabet characters only');
middlename.focus();
return false;
}
}
function city(city) {
var letters = /^[A-Za-z]+$/;
if(area.value.match(letters))
{
return true;
}
else
{
alert('City must have alphabet characters only');
middlename.focus();
return false;
}
}
function db(donateblood) {
if(donateblood.value == "How often you have donated blood?")
{
alert("Select how often you donate blood from the list");
donateblood.focus();
return false;
}
else
{
return true;
}
}
Register.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar(){
window.scrollTo(0,1);
}
</script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/swipebox.css">
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> <!-- animation -->
<link href="css/font-awesome.css" rel="stylesheet"> <!-- font-awesome icons -->
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="/js/Validation.js"></script>
<!-- //js -->
<!-- web-fonts -->
<link href="//fonts.googleapis.com/css?family=Enriqueta:400,700" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- //web-fonts -->
<style type="text/css">
#b1 { color: #999 }
#header { color: red}
</style>
</head>
<body>
<!-- banner -->
<div id="home" class="banner">
<div class="container">
<div class="wthree-header">
<div class="agileits-logo navbar-left">
<h1 class="wow swing animated" data-wow-delay=".5s"></h1>
</div>
<div class="navbar-right social-icons wow fadeInRight animated" data-wow-delay=".5s">
<ul>
<li><a href="#" class="fa fa-facebook icon-border facebook"> </a></li>
<li><a href="#" class="fa fa-twitter icon-border twitter"> </a></li>
<li><a href="#" class="fa fa-google-plus icon-border googleplus"> </a></li>
<li><a href="#" class="fa fa-rss icon-border rss"> </a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<!-- navigation -->
<div class="top-w3lnav">
<nav class="navbar navbar-default">
<div class="navbar-header w3l-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Men</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center w3l-effect">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="#team" class="scroll">Guidelines</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
<div class="clearfix"></div>
</div>
</nav>
</div>
<!-- navigation -->
</div>
</div>
<br>
<br>
<br>
<!-- //banner -->
<!-- welcome -->
<div class="contact" id="contact">
<div class="container">
<div class="contact-form">
<div class="col-md-7 contact-right wow fadeInRight animated" data-wow-delay=".5s">
<h5>Login:</h5>
<br>
<form action="http://localhost:8081/BloodBank/BB/Database" method="get" name= "form" onsubmit="return Validation(); ">
<table class="table" width="100">
<tr>
<td>
First Name:
</td>
<td width="500px">
<input type="text" name="firstname">
</td>
</tr>
<tr>
<td>
Middle Name:
</td>
<td>
<input type="text" name="middlename">
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type="text" name="lastname">
</td>
</tr>
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>
Confirm Password:
</td>
<td width ="50">
<input type="password" name="pass1">
</td>
</tr>
<tr>
<td>
Date Of Birth:
</td>
<td>
<input type="date" name="dob">
</td>
</tr>
<tr>
<td>
Gender:
</td>
<td>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td>
Blood Group:
</td>
<td>
<select name="bloodgroup">
<option value="Select Blood Group" selected="">
Select Blood Group
</option>
<option value="A+">
A+
</option>
<option value="B+">
B+
</option>
<option value="O+">
O+
</option>
<option value="AB+">
AB+
</option>
<option value="AB-">
AB-
</option>
<option value="A-">
A-
</option>
<option value="B-">
B-
</option>
<option value="O-">
O-
</option>
</select>
</td>
</tr>
<tr>
<td>
Weight:
</td>
<td>
<input type="text" name="weight">
</td>
</tr>
<tr>
<td>
Contact:
</td>
<td>
<input type="text" name="contact">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
Date Of Last<br>
Blood Donation:
</td>
<td>
<input type="date" name="lastdate">
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>
Area:
</td>
<td>
<input type="text" name="area">
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>
How Often you have donated<br>blood in past?
</td>
<td>
<select name="donateblood">
<option value="How often you have donated blood?" selected="">
How often you have donated blood?
</option>
<option value="Yet to Donate">
Yet to Donate
</option>
<option value="Regular Donor">
Regular Donor
</option>
<option value="On need of basis">
On need of basis
</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="wow zoomIn animated" data-wow-delay=".5s" type="submit" name="submit" value="SUBMIT" >
</td>
<td>
<input class="wow zoomIn animated" data-wow-delay=".5s" type="reset" name="Reset" value="RESET">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- contact -->
<div class="contact" id="contact">
<div class="container">
<h3 class="w3layouts-title wow fadeInDown animated" data-wow-delay=".5s">Contact Us</h3>
<div class="contact-form">
<div class="col-md-7 contact-right wow fadeInRight animated" data-wow-delay=".5s">
<h5>Feedback Us:</h5>
<br>
<form action="#" method="post">
<input type="text" name="Name" placeholder="Name" required="">
<input type="text" class="email" name="Email" placeholder="Email" required="">
<input type="text" name="Phone no" placeholder="Phone" required="">
<textarea name="Message" placeholder="Message" required=""></textarea>
<input class="wow zoomIn animated" data-wow-delay=".5s" type="submit" value="SUBMIT" >
</form>
</div>
<div class="col-md-5 contact-left">
<div class="address address-mdl wow fadeInLeft animated" data-wow-delay=".5s">
<h5>Phones:</h5>
<p>
<i class="glyphicon glyphicon-earphone"></i>
+9900887766
</p>
<p>
<i class="glyphicon glyphicon-phone"></i>
+11 222 333
</p>
</div>
<div class="address wow fadeInLeft animated" data-wow-delay=".5s">
<h5>Email:</h5>
<p>
<i class="glyphicon glyphicon-envelope"></i>
<a href="mailto:[email protected]">
[email protected]
</a>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //contact -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="clearfix"></div>
</div>
</div>
<!-- //footer -->
<!-- copy right -->
<div class="footer-bottom">
<div class="container"></div>
</div>
<!-- //copy right -->
<!-- animation -->
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<!-- //animation -->
<!-- start-smooth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- //end-smooth-scrolling -->
<!-- smooth-scrolling-of-move-up -->
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //smooth-scrolling-of-move-up -->
<!-- Bootstrap core JavaScript================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.js"></script>
</body>
每当我单击“提交”按钮时，它将自动重定向到另一页...警告消息不显示。
也就是说，它不会调用Validation.js页面。
错误对话框显示为空字段，但如果我应用正则表达式验证器，则不会显示
最佳答案
您需要先阻止默认的回发操作，然后才能运行Javascript。
以下应该工作：
<form action="http://localhost:8081/BloodBank/BB/Database" method="get" name= "form" onsubmit="event.preventDefault(); Validation(); ">