This article describes the method of JS for form verification. Share it for your reference. The specific implementation method is as follows:
1. Traditional form verification code
Copy the 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 Verification</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 empty");
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
alert("The mailbox format is incorrect, must include @ and.");
$("email").focus();
return false;
}
if(password == "") {
alert("Password cannot be empty");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("The password length must be greater than or equal to 6");
$("password").focus();
return false;
}
if(repassword != password) {
alert("The password entered twice is inconsistent");
$("repassword").focus();
return false;
}
if(name == "") {
alert("The 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) {
alert('The 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"/>
</div>
<div>
Password:<input type="password" name="password" id="password" />
</div>
<div>
Re-enter the password:<input type="password" name="repassword" id="repassword" />
</div>
<div>
Name: <input type="text" name="name" id="name" />
</div>
<div>
<input type="submit" value="register" />
</div>
</form>
</body>
</html>
2. Verification of form with prompt information behind the input box
Copy the 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 Verification</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 empty";
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "The mailbox format is incorrect, must include @ and.";
$("email").focus();
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "Password cannot be empty";
$("password").focus();
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "The password length must be greater than or equal to 6";
$("password").focus();
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "The password entered twice is inconsistent";
$("repassword").focus();
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "The 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 = 'The 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-enter the 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="register" />
</div>
</form>
</body>
</html>
The renderings are as follows:
3. Trigger the check function when the input box loses focus
Copy the 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 Verification</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 empty";
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "The mailbox format is incorrect, must include @ and.";
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "Password cannot be empty";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "The password length must be greater than or equal to 6";
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "The password entered twice is inconsistent";
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "The 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 = 'The name cannot contain numbers';
return false;
}
}
}
function checkEmail() { //Check Email
$('emailinfo').innerHTML = "";
var email = $('email').value;
if(email == "") {
$('emailinfo').innerHTML = "The Email value cannot be empty";
return false;
}
if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
$('emailinfo').innerHTML = "Email must contain @ and.";
return false;
}
}
function checkPassword() { //Check password
$('passwordinfo').innerHTML = "";
var password = $('password').value;
if(password == "") {
$("passwordinfo").innerHTML = "Password cannot be empty";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "The password length must be greater than or equal to 6";
return false;
}
}
function checkRepassword() { //Check the re-entered password
$('repassword').innerHTML = "";
var repassword = $('repassword').value;
if(repassword != password) {
$("repasswordinfo").innerHTML = "The password entered twice is inconsistent";
return false;
}
}
function checkName() { //Check name
$('nameinfo').innerHTML = "";
var name = $('name').value;
if(name == "") {
$("nameinfo").innerHTML = "The 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 = 'The 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-enter the 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="register" />
</div>
</form>
</body>
</html>
The renderings are as follows:
I hope this article will be helpful to everyone's JavaScript programming.