php开发笔记（六）小测验之生成验证码-CSDN博客

本文链接：https://blog.csdn.net/ZP_HaiLin/article/details/57406324

<!doctype html>
<html lang="en">
<head>
	<meta charset="gb2312" />
	<title>随机数生成四位验证码</title>
	<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
</head>
<body>
<?php
    $str='';
    for($i=0;$i<4;$i++){
        $str.='<span style="color:rgb('.mt_rand(0,255).',
        '.mt_rand(0,255).',
            '.mt_rand(0,255).')">'.mt_rand(0, 9).'</span>';
    }
?>
<label for="check">请输入验证码:</label>
<input type="text" id="check_val"/>
<div id="get_str" style="display:inline;"><?php echo $str; ?></div><br/>
<input type="button" onClick="javascript:check();" value="提交">
<script>
function check(){
    var val1=$("#check_val").val();
    var val2=$("#get_str").text();
    val1=val1*1;
    val2=val2*1;
    if(val1==val2){
        alert("ok");
    }else{
        alert("false");
    }
}
</script>
</body>
</html>

学习了字符串的连接符之后，便做了这样的一个随机生成四位验证码并且作出验证的demo.重点代码作出以下介绍：

（一）生成四位验证码并且具有不同的颜色

学会随机数的使用mt_rand($min,$max)会任意产生由min到max之间的任意数，故需要循环四次，同时使用php的字符串连接符.将四次生成的随机数字连接成一个完整的字符串。

在php生成验证码的过程中，一定要十分注意单引号的使用，由mt_rand()函数生成的数值不需要用单引号，其他的html代码，由于会被浏览器当成字符串处理的缘故，需用单引号，并且需使用连接符将其连接。

（二）如何检验输入框中输入的数字和生成的验证码一致

需使用js进行验证，在这里，我们在<head></head>引入了jquery库

<script src="jquery-3.0.0.min.js" type="text/javascript"></script>

其实不使用jquery，而直接使用js也是同样可以的，代码会有所改动，得到的效果相同

var val1=document.getElementById('check_val').value;
var val2=document.getElementById('get_str').textContent;

js使用element.value获取元素的值，使用element.textContent获取元素文本的值，由于输入的内容和验证码在通过这两个元素属性获取后，会自动转化为字符串类型，故需要1将其转换为数值形式，不转换也可以，其可以当作字符串之间是否相等来处理。