The JavaScript form validation instance verifies that the form entry is empty

  • 2020-11-25 07:08:20
  • OfStack

Forms authentication in almost every one need to register or log in website is indispensable, some of the validation is very complex, is various to your request, but this section only under 1 introduced form one of the most simple way of validation, is to judge whether is empty, some require lower site has already meet the need.

The code is as follows:


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.ofstack.com/" /> 
<title>js Simple Form validation </title> 
<script type="text/javascript">
window.onload=function()
{
var bt=document.getElementById("bt");
bt.onclick=function()
{
if(document.myform.name.value=="")
{
alert(" The user name cannot be empty !");
document.myform.name.focus();
return false;
} 
else if(document.myform.pw.value=="")
{
alert(" The password cannot be empty !");
document.myform.pw.focus();
return false; 
}
}
}
</script>
</head>
<body>
<form action="index.php" method="get" name="myform">
<ul>
<li> The name :<input type="text" name="name" id="name" /></li>
<li> password :<input type="text" name="pw" id="age" /></li>
<li><input type="submit" id="bt"/></li>
</ul> 
</form>
</body>
</html>

The above code, when clicked on the submit button, can perform simple form validation. If the form item is empty, a prompt will pop up and focus on the current form item. The code is relatively simple.

Here's a look at the js validation form instance code:

gspan.html


 <html>
 <head>
 <title> Form validation instance </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-" />
 <script src="check.js" type="text/javascript"></script>
 <style>
 span{ font-size:px; }
 .stats{ color : #ccc; }
 .stats{ color :black; }
 .stats{ color :red; }
 .stats{ color :green; }
 </style>
 </head>
 <body>
 <form method="post" action="reg.php" onsubmit="return regs('click')" >
  User name: <input type="text" name="username" /><span class="stats"> The user name cannot be empty </span><br/>
  Email address: <input type="text" name="email" /><span class="stats"> The mailbox cannot be empty </span><br/>
  Password: <input type="password" name="password" /><span class="stats"> The password cannot be empty </span><br/> 
  Confirm password: <input type="password" name="chkpass" /><span class="stats"> The password cannot be empty </span><br/>
 <input type="submit" />
 </form>
 </body>
 </html>

check.js


function gspan(cobj){ // After getting the form span  The label   Display prompt message 
if (cobj.nextSibling.nodeName != 'SPAN'){ 
gspan(cobj.nextSibling); 
} else { 
return cobj.nextSibling;
}
} 
// Check the form  obj [Form object],  info [Prompt Message]  fun [Processing function]  click  [Whether you need to click,   Need to trigger when submitting  
function check(obj, info, fun, click){ 
var sp = gspan(obj); 
obj.onfocus = function(){ 
sp.innerHTML = info; 
sp.className = 'stats';
}
obj.onblur = function(){
if (fun(this.value)){
sp.innerHTML = " Input correct! ";
sp.className = "stats";
} else {
sp.innerHTML = info;
sp.className = "stats";
}
}
if (click == 'click'){
obj.onblur();
}
}
onload = regs; // The page loads and executes 
function regs(click){
var stat = true; // Return to status,   Used when submitting data 
username = document.getElementsByName('username')[];
password = document.getElementsByName('password')[];
chkpass = document.getElementsByName('chkpass')[];
email = document.getElementsByName('email')[];
check(username, " The length of the user name is - between ", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <=){
return true;
} else {
stat = false;
return false;
}
}, click);
check(password, " Password must be in the - Between a ", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <=){
return true;
} else {
stat = false;
return false;
}
}, click);
check(chkpass, " Make sure the password is the same as above 1 To, the rules should be the same ", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <= && val == password.value){
return true;
} else {
stat = false;
return false;
}
}, click);
check(email, " Please enter according to the email rules ", function(val){
if (val.match(/\w+@\w+\.\w/)){
return true;
} else {
stat = false;
return false;
}
}, click);
return stat;
}


Related articles: