Simple verification code

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

Simple verification code

Guess you like