Simple verification code implementation may not be used in actual development, but this method can be learned; the following is the code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> function chkyzm(form){ if(form.yzm.value==""){ yzm1.innerHTML = " <font color=#FF0000>Please enter the verification code!</font> " ; }else{ alert( "The entered verification code is correct " ); } } function yzm(form){ var num1=Math.round(Math.random()*10000000); var num=num1.toString().substr(0,4); document.write("<img name=codeimg src='yzm.php?num="+num+"'>"); form.yzm2.value=num; } function code(form){ var num1=Math.round(Math.random()*10000000); var num=num1.toString().substr(0,4); document.codeimg.src="yzm.php?num="+num; form.yzm2.value=num; } </script> <table> <form id="register" name="register" action="#" method="post"> <tr> <td><div align="right">验证码:</div></td> <td> <input id="yzm" type="text" name="yzm" onBlur="javascript:chkyzm(register)" onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor='yellow'"/> <input name="yzm2" type="hidden" value="" /> </td> <td align="center" valign="middle"><script>yzm(register)</script></td> <td><a href="javascript:code(register)">td<>td</</a>n't readCa ><div id="yzm1"><font color="#999999">输入验证码</font></div></td> <td><input type="submit" value="提交"/> <input type="reset" value="重写" /></td> </tr> </form> </table> </body> </html>
Knowledge points
refer to the way of JavaScript:
JavaScript: function name (parameter)
<script>function name (parameter)</script>
The onblur event occurs when the object loses focus. www.w3school.com.cn/jsref/event_onblur.asp The
onmouseover event occurs when the mouse pointer moves over the specified object. www.w3school.com.cn/jsref/event_onmouseover.asp The
onmouseout property fires when the mouse pointer moves outside the element. www.w3school.com.cn/tags/event_onmouseout.asp
The following is the background and interference code to generate verification code using GD library functions:
header ( "Content-type: text/html; charset=UTF-8" ); // Set the file encoding format srand (( double ) microtime ()*1000000); // Generate random numbers $im =imagecreate(65,35 ); // Create canvas $black =imagecolorallocate( $im ,0,0,0); // Define background $white =imagecolorallocate( $im ,255,255,255); // Define background $gray =imagecolorallocate( $im ,200,200,200) ; // Define background imagefill( $im ,0,0, $gray ); // Fill color for ( $i =0; $i <4; $i ++){ // Define 4 random numbers $str = mt_rand (3,20); // Define the Y coordinate of the location of the random character $size = mt_rand (5,8); // Define the font of the random character $authnum = substr ( $_GET ['num'], $i , 1); //Get the verification code passed in the hyperlink imagestring( $im , $size ,(2+ $i *15), $str , $authnum ,imagecolorallocate( $im , rand (0,130), rand (0,130), rand (0,130 ) )); } // Horizontal output string for ( $i =0; $i <200; $i ++){ // Execute the for loop to add a blurred background to the verification code; generate interference lines $randcolor =imagecolorallocate( $im , rand (0,255), rand (0,255), rand (0,255)); // Create a background; define the color of the interference line imagesetpixel( $im , rand ()%70, rand ()%30, $randcolor ); // Draw a single element ; generate interference lines } imagepng( $im ); // Generate png image imagedestroy( $im ); // Destroy the image ?>
JavaScript Events Reference Manual www.w3school.com.cn/jsref/jsref_events.asp