The PHP graphic Verification Code Generation Code and the verification code programs written before the application include Ajax verification instances provide source code, but the actual graphic verification code is not generated to the verification instance, this time we generated a complete php verification instance.
Php graphic verification code generation and ajax verification examples
Previously, the verification code program provided source code, but did not generate a real graphic verification code to the verification instance. This time, we generated a complete php verification instance.
There are 3 files:
Authcode. php ----- php file generated for the verification code
Authcode.html ----- front-end display page
Dealauthcode. php ----- processing page submitted by ajax to the background to determine whether the verification code is correct
*/
?>
The front-end calls the verification code
<! 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> Verification Code ajax verification </title>
<Style type = "text/css tutorial">
* {Font-size: 12px ;}
A {text-decoration: none ;}
A: hover {text-decoration: underline; color: red ;}
</Style>
<Script language = "webpage effects" src = "http://code.jquery.com/jquery-1.4.2.min.webpage effects"> </script>
<Script language = "webpage effect">
$ (Document). ready (function (){
/* ---------------- Cannot see clearly. Change the image -----------*/
$ ("# Chang_authcode_btn"). click (function (){
Var authcode_url = "authcode. php? T = "+ math. random (0, 1 );
$ ("# Authcode_img"). attr ('src', authcode_url );
});
/* -------------- Check the verification code -----------*/
$ ("# Authcode"). bind ({
'Focusin ': function (){
/**
* Get focus
* I removed the img image. If only src is changed'
* 'In ie, a small image without images will be displayed,
* Here I choose to remove the img element directly.
*/
$ (This). next ('label'). children ('img '). remove ();
$ (This). next ('label'). children ('span '). text ('');
},
'Focusout': function (){
/**
* Losing focus
* The main tasks to be done here are as follows:
* (1) first use webpage special effects to verify whether the verification entered by the user is a four-digit valid character, regular match
* (2) if regular expression matching fails (not a valid 4-character), update the verification code image (that is, re-trigger the Click Event of the "invisible" a tag)
*/
Var input_authcode = $ (this). val ();
Var authcode_regex = new regexp ('^ [a-z0-9] {4}', 'I ');
If (! Authcode_regex.test (input_authcode) {// the error message is returned to the user because it is not a valid 4-Bit String.
$ (This). next ('label'). prepend ("$ (This). next ('label'). children ('span '). text ('incorrect verification code format! '); // Add the error message
$ ("# Chang_authcode_btn"). trigger ('click'); // refresh the image again
} Else {// ajax server verification is to submit the verification code entered by the user to a verification page on the server for processing!
$. Get ('dealauthcode. php', {authcode: input_authcode}, function (check_result ){
If (check_result = 'mis _ Match') {// server Verification Failed
$ ("# Authcode"). next ('label'). prepend ("$ ("# Authcode"). next ('label'). children ('span '). text ('verification code input error! '); // Add the error message
$ ("# Chang_authcode_btn"). trigger ('click'); // refresh the image again
} Else {// server verification passed
$ ("# Authcode"). next ('label'). prepend ("$ ("# Authcode"). next ('label'). children ('span '). text ('verification code entered correctly! '); // Add the Correct prompt information
}
});
}
}
});
});
</Script>
</Head>
<Body>
<Div>
<Div> <a id = "chang_authcode_btn" style = "cursor: pointer"> cannot see clearly? Change one! </A> </div>
<Div> Verification Code: <input id = "authcode" type = "text" size = "20"/> <label> <span class = "error_msg"> </span> </label> </ div>
</Div>
</Body>
</Html>
1 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
