Php tutorial pattern verification code generation code and include ajax verification example application previously written verification code program is to provide the source code, but did not really figure verification code generated to verify the instance, this time we have a complete example of PHP validation It's
There are 3 files:
authcode.php ----- verification code generated php file
authcode.html ----- Front display page
dealauthcode.php ----- ajax submitted to the background processing to determine whether the verification code is correct page
* /
?>
Front desk code 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.jzread.com/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" />
<title> CAPTCHA ajax validation </ 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 effects">
$ (document) .ready (function () {
/ * ---------------- Can not see, for a picture ----------- * /
$ ("# chang_authcode_btn"). click (function () {
var authcode_url = "authcode.php? t =" + math.random (0,1);
$ ("# authcode_img"). attr ('src', authcode_url);
});
/ * ---------------- Test verification code ----------- * /
$ ("# authcode"). bind ({
'focusin': function () {
/ **
Get the focus
* I will img remove the picture, if only to change src to '
* ', Then under ie there will be a small picture without pictures,
* So I choose to remove the img element directly here
* /
$ (this) .next ('label'). children ('img'). remove ();
$ (this) .next ('label'). children ('span'). text ('');
},
'focusout': function () {
/ **
*lose focus
* Here are the main things to do the following:
* (1) The first use of web page authentication to verify the user input is not valid characters 4, the regular match
* (2) If the regular match fails (not a valid 4-digit character), after updating the CAPTCHA image (that is, triggering an "invisible" a-tag click event again)
* /
var input_authcode = $ (this) .val ();
var authcode_regex = new regexp ('^ [a-z0-9] {4}', 'i');
if (! authcode_regex.test (input_authcode)) {// is not a valid 4-character string and displays an error message to the user
$ (this) .next ('label'). prepend ("<img src = 'input_error.gif' />"); // add the error icon
$ (this) .next ('label'). children ('span'). text ('Error code!'); // with error message
$ ("# chang_authcode_btn"). trigger ('click'); // refresh the image again
} Else {// ajax server authentication, is the user's verification code submitted to the server on a verification page to deal with!
$ .get ('dealauthcode.php', {authcode: input_authcode}, function (check_result) {
if (check_result == 'mis_match') {// server validation failed
$ ("# authcode"). next ('label'). prepend ("<img src = 'input_error.gif' />"); // Add the error icon
$ ("# authcode"). next ('label'). children ('span'). text ('captcha error!'); // Add error message
$ ("# chang_authcode_btn"). trigger ('click'); // refresh the image again
} else {// server authentication passed
$ ("# authcode"). next ('label'). prepend ("<img src = 'input_ok.gif' />"); // add the correct icon
$ ("# authcode"). next ('label'). children ('span'). text ('Enter the correct code!'); // Add the correct message
}
});
}
}
});
});
</ script>
</ head>
<body>
<div>
<div> <img id = "authcode_img" src = "authcode.php" /> <a id="chang_authcode_btn" style="cursor:pointer"> Can not see clearly? Change one! </a> </ div>
<div> CAPTCHA: <input id = "authcode" type = "text" size = "20" /> <label> <span class = "error_msg"> </ span> </ label> </ div>
</ div>
</ body>
</ html>
dealauthcode.php ----- ajax submitted to the background processing to determine whether the verification code is correct page
<? php
session_start ();
$ authcode = $ _get ['authcode'];
// Here $ _session ['authcode'] is generated in authcode page
if (strtoupper ($ authcode)! = $ _session ['authcode']) {
echo 'mis_match';
}
?>
Generate captcha authcode.php file
<? php
session_start ();
header ('content-type: image / png');
// Create a picture
$ im = imagecreate ($ x = 130, $ y = 45);
$ bg = imagecolorallocate ($ im, rand (50,200), rand (0,155), rand (0,155));
// The first call to imagecolorallocate () will fill the palette-based image with the background color
$ fontcolor = imagecolorallocate ($ im, 255, 255, 255);
//font color
$ fontstyle = 'rock.ttf';
// font style file, this file is from us
c: windowsfonts choose the font of a random out, you can also replace the other!
// produce random characters
for ($ i = 0; $ i <4; $ i ++) {
$ randasciinumarray = array (rand (48,57), rand
(65,90));
$ randasciinum = $ randasciinumarray [rand (
0, 1)];
$ randstr = chr ($ randasciinum);
imagettftext ($ im, 30, rand (0,20) -rand (0,25), 5 + $ i * 30, rand
(30,35), $ fontcolor, $ fontstyle, $ randstr);
$ authcode. = $ randstr;
}
$ _session ['authcode'] = $ authcode;
// Interference line
for ($ i = 0; $ i <8; $ i ++) {
$ linecolor = imagecolorallocate ($ im, rand
(0,255), rand (0,255), rand (0,255));
imageline ($ im, rand (0, $ x), 0, rand (0, $ x), $ y, $ linecolor);
}
// Disturbing point
for ($ i = 0; $ i <250; $ i ++) {
imagesetpixel ($ im, rand (0, $ x), rand (0, $ y), $ fontcolor);
}
imagepng ($ im);
imagedestroy ($ im);
/ *
Registration is often used when the registration code to prevent the malicious registration machine, where I published a PNG image verification code generated the basic image, very simple but the idea is clear:
1, produce a png picture
2, set the background color for the picture
3, set the font color and style
4, generate a 4-digit random verification code
5, the resulting rotation of each character to adjust the rotation angle and position on the png picture
6, add noise and interference lines to prevent the registered machine to analyze the original picture to malicious registration
7, output pictures
8, release the memory occupied by the picture
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
