JavaScript form validation example
|
HTML forms are commonly used to collect user information such as name, email address, location, age, etc. But it is likely that some users may not enter the data you expect. HTML form validation can be done via JavaScript. To avoid unnecessary pressure on server resources, you can use JavaScript to validate the form data on the client (user system). Incorrect information will not be submitted to the backend server - this is called client-side validation. This article will introduce this verification Form validation is generally divided into two methods. Client-side validation: Execute JS directly on the client to perform validation. There is no interaction with the server during the validation process. Server-side verification: The page sends the verification information back to the server, which performs verification and sends the verification result back to the client. Both verifications are necessary because the client-side verification security is not very high, but it can prevent more than 80% of user misoperations, reduce the pressure on the server, and is very fast, providing a high user experience. Don't think that you don't need server-side verification if you have client-side verification. Client-side verification is very easy to bypass. Server-side verification is more secure, so generally both verifications need to be written. 】 Example 1: A simple example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple form validation example</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
//alert("Name must be filled in");
usernameerror.innerHTML="<font color='red'>Name is required</font>";
return false;
}
else{
usernameerror.innerHTML="correct";
return true;
}
}
</script>
</head>
<body>
<!--
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
-->
<form name="myForm" onsubmit="return validateForm()" >
Name: <input type="text" name="fname" id="username">
<span id="usernameerror"></span>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>Save the file name: Form verification example 1.html Run the test with a browser and the results are as follows:
Example 2: A more complex example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Validation Example Register User</title>
<style type="text/css">
</style>
<script>
function checkusername()
{
var myform = document.getElementById("form1");
var username = myform.username.value.length;
if(username < 1||username>12)
{
errusername.innerHTML = "<font color='red'>Username does not meet the requirements</font>";
return false;
}else{
errusername.innerHTML = "<font color='green'>Username meets the requirements</font>";
return true;
}
}
function checkage()
{
var myform = document.getElementById("form1");
var age = myform.age.value;
if(age != parseInt(age))
{
errage.innerHTML = "<font color='red'>Age does not meet the requirements</font>";
return false;
}else{
errage.innerHTML = "<font color='green'>Age meets the requirements</font>";
return true;
}
}
function checkemail()
{
var myform = document.getElementById("form1");
var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!mail.test(myform.email.value))
{
erremail.innerHTML = "<font color='red'>email does not meet the requirements</font>";
return false;
}else{
erremail.innerHTML = "<font color='green'>email meets the requirements</font>";
return true;
}
}
function checkform()
{
checkusername();checkage();checkemail();
if(checkusername()&&checkage()&&checkemail())
{
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!--
<form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
-->
<form id="form1" name="form1" method="post" onsubmit="return checkform()">
<table width="777" border="0" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3" ><div align="center">Please enter your registration information</div></td>
</tr>
<tr>
<td width="250" ><div align="right" >Please enter your username: </div></td>
<td width="250"><div align="center">
<input type="text" name="username" onblur="checkusername()" />
</div></td>
<td><div id="errusername" align="center"></div></td>
</tr>
<tr>
<td width="250"><div align="right">Please enter your age:</div></td>
<td width="250"><div align="center" >
<label>
<input type="text" name="age" onblur="checkage()"/>
</label>
</div></td>
<td><div align="center" id="errage"></div></td>
</tr>
<tr>
<td width="250"><div align="right" >Please enter your EMAIL:</div></td>
<td width="250"><div align="center" >
<label>
<input type="text" name="email" onblur="checkemail()" />
</label>
</div></td>
<td><div align="center" id="erremail"></div></td>
</tr>
<tr>
<td><div align="right">
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</div></td>
<td><div align="center">
<label>
<input type="reset" name="Submit2" value="Reset" />
</label>
</div></td>
<td><div align="center"></div></td>
</tr>
</table>
</form>
</body>
</html>Save the file name: Form verification example 1.html Run the test with a browser and the results are as follows:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of the difference between alt and title
>>: Tutorial on using the frameset tag in HTML
Recommend
Characteristics of JavaScript arrow functions and differences from ordinary functions
Table of contents 1. Use of arrow functions 1. Fr...
15-minute parallel artifact GNU Parallel Getting Started Guide
GNU Parallel is a shell tool for executing comput...
Keepalived implements Nginx load balancing and high availability sample code
Chapter 1: Introduction to keepalived The purpose...
HTML head tag meta to achieve refresh redirection
Copy code The code is as follows: <html> &l...
Comparative Analysis of High Availability Solutions of Oracle and MySQL
Regarding the high availability solutions for Ora...
How to handle the failure of inserting rare characters in MySQL (Incorrect string value)
Recently, the business side reported that some us...
Solution to slow response of Tomcat server
1. Analytical thinking 1. Eliminate the machine&#...
Native js to achieve simple carousel effect
This article shares the specific code of js to ac...
Problems and experiences encountered in web development
<br />The following are the problems I encou...
CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements
Problem Description I want to use CSS to achieve ...
Detailed explanation of writing multiple conditions of CSS: not
The :not pseudo-class selector can filter element...
VMware ESXI server virtualization cluster
Table of contents summary Environment and tool pr...
How to Easily Remove Source Installed Packages in Linux
Step 1: Install Stow In this example, we are usin...
The front-end page pop-up mask prohibits page scrolling
A problem that front-end developers often encount...
Start a local Kubernetes environment using kind and Docker
introduce Have you ever spent a whole day trying ...