PHP Graph Validation Code Generate Code and Include Ajax Validation Instance Application

Source: Internet
Author: User
Keywords Network programming PHP tutorial
Tags ajax application authentication click code content display error

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.w3.org/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

* /
?>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.