1. Writing User Login interface
Do it yourself as needed, see User registration and login design.
2. write code to implement the Captcha JavaScript script
<script language= "javascript" type= "Text/javascript" >
var code; defining the verification code globally
function Createcode () { // Generate verification code functions
Code = new Array ();
var codelength = Length of 4;//verification code
var checkcode = document.getElementById ("Checkcode");
Checkcode.value = "";
var Selectchar = new Array (2,3,4,5,6,7,8,9, ' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' J ', ' K ', ' L ', ' M ', ' N ', ' P ', ' Q ', ' R ', ' S ', ' T ' , ' U ', ' V ', ' W ', ' X ', ' Y ', ' Z ');
for (Var i=0;i<codelength;i++) {
var charIndex = Math.floor (Math.random () *32);
Code +=selectchar[charindex];
}
if (code.length! = codelength) {
Createcode ();
}
Checkcode.value = code;
}
}
</script>
3. Verify that the input verification code is correct
<script language= "javascript" type= "Text/javascript" >
function Validate () {// Determine if the input verification code is correct
var inputcode = document.getElementById ("input1"). Value.touppercase ();
if (Inputcode.length <=0) {
Alert (" Please enter the verification code!) "); Verify that a verification code is entered
return false;
}
else if (inputcode! = code) {
Alert (" Verification code input Error! "); Verifying the verification code
Createcode ();
return false;
}
else {
Form_submit ();
return true;
}
</script>
4. page Implementation Verification code function
<body onload= "Createcode (); >
<div id= "Top" > </div>
<form id= "Login" name= "login" action= "dologin.jsp" method= "POST" >
<div id= "center" >
<div id= "Center_left" ></div>
<div id= "Center_middle" >
<div class= "User" >
<label> user name:
<input type= "text" name= "username" id= "username"/>
</label>
</div>
<div class= "User" >
<label> Password:
<input type= "password" name= "password" id= "password"/>
</label>
</div>
<div class= "Chknumber" >
<label> Verification Code:
<input type= "text" id= "input1"/>
<input type= "button" id= "Checkcode" class= "code" style= "width:60px" onclick= "Createcode ()"/>
<a href= "#" onclick= "Createcode ()" > can't see clearly </a>
<script></script>
</div>
</div>
<div id= "Center_middle_right" ></div>
<div id= "Center_submit" >
<div class= "button" > </div>
<div class= "button" > </div>
</div>
<div id= "Center_right" ></div>
</div>
</form>
<div id= "Footer" ></div>
</body>
This article is from the "Learn Without thinking" blog, please be sure to keep this source http://dyzyxy.blog.51cto.com/944775/1652077
JavaScript Implementation Verification Code function