The example of this article describes the method of JS to form verification. Share to everyone for your reference. The implementation methods are as follows:
1. Traditional form validation code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Form Validation </title>
<script type= "Text/javascript" >
function $ (ID) {
return document.getElementById (ID);
}
function Check () {
var email = $ ("email"). Value;
var password = $ ("password"). Value;
var Repassword = $ ("Repassword"). Value;
var name = $ ("name"). Value;
if (email = = "") {
Alert ("Email value cannot be null");
$ ("email"). focus ();
return false;
}
if (Email.indexof ("@") = = 1 | | email.indexof (".") = = 1) {
Alert ("Mailbox format is incorrect, must contain @ and.");
$ ("email"). focus ();
return false;
}
if (password = = "") {
Alert ("Password cannot be blank");
$ ("password"). focus ();
return false;
}
if (Password.length < 6) {
Alert ("Password length must be greater than or equal to 6");
$ ("password"). focus ();
return false;
}
if (repassword!= password) {
Alert ("Two input passwords are inconsistent");
$ ("Repassword"). focus ();
return false;
}
if (name = = "") {
Alert ("Name cannot be blank");
$ ("name"). focus ();
return false;
}
for (var i = 0; i < name.length; i++) {
var j = name.substring (i, i+1);
if (isNaN (j) = = False) {
Alert (' names cannot contain numbers ');
$ ("name"). focus ();
return false;
}
}
}
</script>
</head>
<body>
<form name= "Login_form" method= "POST" onsubmit= "return Check ()" >
<div>
Email:<input type= "text" name= "email" id= "email"/>
</div>
<div>
Password: <input type= "password" name= "password" id= "password"/>
</div>
<div>
Re-transmission password: <input type= "password" name= "Repassword" id= "Repassword"/>
</div>
<div>
Name: <input type= "text" name= "name" id= "name"/>
</div>
<div>
<input type= "Submit" value= "registered"/>
</div>
</form>
</body>
</html>
2. Form validation with prompt information behind the input box
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Form Validation </title>
<script type= "Text/javascript" >
function $ (ID) {
return document.getElementById (ID);
}
function Check () {
var email = $ ("email"). Value;
var password = $ ("password"). Value;
var Repassword = $ ("Repassword"). Value;
var name = $ ("name"). Value;
$ ("EmailInfo"). InnerHTML = "";
$ ("Passwordinfo"). InnerHTML = "";
$ ("Repasswordinfo"). InnerHTML = "";
$ ("Nameinfo"). InnerHTML = "";
if (email = = "") {
$ ("EmailInfo"). InnerHTML = "Email value cannot be null";
$ ("email"). focus ();
return false;
}
if (Email.indexof ("@") = = 1 | | email.indexof (".") = = 1) {
$ ("EmailInfo"). InnerHTML = "Mailbox format is incorrect, must contain @ and.";
$ ("email"). focus ();
return false;
}
if (password = = "") {
$ ("Passwordinfo"). InnerHTML = "Password cannot be null";
$ ("password"). focus ();
return false;
}
if (Password.length < 6) {
$ ("Passwordinfo"). InnerHTML = "Password length must be greater than or equal to 6";
$ ("password"). focus ();
return false;
}
if (repassword!= password) {
$ ("Repasswordinfo"). InnerHTML = "Two input passwords inconsistent";
$ ("Repassword"). focus ();
return false;
}
if (name = = "") {
$ ("Nameinfo"). InnerHTML = "Name cannot be empty";
$ ("name"). focus ();
return false;
}
for (var i = 0; i < name.length; i++) {
var j = name.substring (i, i+1);
if (isNaN (j) = = False) {
$ ("Nameinfo"). InnerHTML = ' name cannot contain numbers ';
$ ("name"). focus ();
return false;
}
}
}
</script>
</head>
<body>
<form name= "Login_form" method= "POST" onsubmit= "return Check ()" >
<div>
Email:<input type= "text" name= "email" id= "email"/><span id= "EmailInfo" ></span>
</div>
<div>
Password: <input type= "password" name= "password" id= "password"/><span id= "Passwordinfo" ></span>
</div>
<div>
Re-transmission password: <input type= "password" name= "Repassword" id= "Repassword"/><span id= "Repasswordinfo" ></span>
</div>
<div>
Name: <input type= "text" name= "name" id= "name"/><span id= "Nameinfo" ></span>
</div>
<div>
<input type= "Submit" value= "registered"/>
</div>
</form>
</body>
</html>
The effect diagram looks like this:
3. Trigger the CHECKSUM function when the input box loses focus
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Form Validation </title>
<script type= "Text/javascript" >
function $ (ID) {
return document.getElementById (ID);
}
function Check () {
var email = $ ("email"). Value;
var password = $ ("password"). Value;
var Repassword = $ ("Repassword"). Value;
var name = $ ("name"). Value;
$ ("EmailInfo"). InnerHTML = "";
$ ("Passwordinfo"). InnerHTML = "";
$ ("Repasswordinfo"). InnerHTML = "";
$ ("Nameinfo"). InnerHTML = "";
if (email = = "") {
$ ("EmailInfo"). InnerHTML = "Email value cannot be null";
return false;
}
if (Email.indexof ("@") = = 1 | | email.indexof (".") = = 1) {
$ ("EmailInfo"). InnerHTML = "Mailbox format is incorrect, must contain @ and.";
return false;
}
if (password = = "") {
$ ("Passwordinfo"). InnerHTML = "Password cannot be null";
return false;
}
if (Password.length < 6) {
$ ("Passwordinfo"). InnerHTML = "Password length must be greater than or equal to 6";
return false;
}
if (repassword!= password) {
$ ("Repasswordinfo"). InnerHTML = "Two input passwords inconsistent";
return false;
}
if (name = = "") {
$ ("Nameinfo"). InnerHTML = "Name cannot be empty";
return false;
}
for (var i = 0; i < name.length; i++) {
var j = name.substring (i, i+1);
if (isNaN (j) = = False) {
$ ("Nameinfo"). InnerHTML = ' name cannot contain numbers ';
return false;
}
}
}
function Checkemail () {//Check email
$ (' EmailInfo '). InnerHTML = "";
var email = $ (' email '). Value;
if (email = = "") {
$ (' EmailInfo '). InnerHTML = "Email value cannot be null";
return false;
}
if (Email.indexof (' @ ') = = 1 | | email.indexof ('. ') = = 1) {
$ (' EmailInfo '). InnerHTML = "Email must contain @ and.";
return false;
}
}
function Checkpassword () {//Verify Password
$ (' Passwordinfo '). InnerHTML = "";
var password = $ (' password '). value;
if (password = = "") {
$ ("Passwordinfo"). InnerHTML = "Password cannot be null";
return false;
}
if (Password.length < 6) {
$ ("Passwordinfo"). InnerHTML = "Password length must be greater than or equal to 6";
return false;
}
}
function Checkrepassword () {//checksum password entered again
$ (' Repassword '). InnerHTML = "";
var Repassword = $ (' Repassword '). Value;
if (repassword!= password) {
$ ("Repasswordinfo"). InnerHTML = "Two input passwords inconsistent";
return false;
}
}
function CheckName () {//Verify Name
$ (' Nameinfo '). InnerHTML = "";
var name = $ (' name '). Value;
if (name = = "") {
$ ("Nameinfo"). InnerHTML = "Name cannot be empty";
return false;
}
for (var i = 0; i < name.length; i++) {
var j = name.substring (i, i+1);
if (isNaN (j) = = False) {
$ ("Nameinfo"). InnerHTML = ' name cannot contain numbers ';
return false;
}
}
}
</script>
</head>
<body>
<form name= "Login_form" method= "POST" onsubmit= "return Check ()" >
<div>
Email:<input type= "text" name= "email" id= "email" onblur= "checkemail ();" /><span id= "EmailInfo" ></span>
</div>
<div>
Password: <input type= "password" name= "password" "id=" password "onblur=" Checkpassword (); " /><span id= "Passwordinfo" ></span>
</div>
<div>
Re-transmission password: <input type= "password" name= "Repassword" id= "Repassword" "onblur=" Checkrepassword (); " /><span id= "Repasswordinfo" ></span>
</div>
<div>
Name: <input type= "text" name= "name" id= "name" onblur= "CheckName ();" /><span id= "Nameinfo" ></span>
</div>
<div>
<input type= "Submit" value= "registered"/>
</div>
</form>
</body>
</html>
The effect diagram looks like this:
I hope this article will help you with your JavaScript programming.
