<!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将其转换为数值形式,不转换也可以,其可以当作字符串之间是否相等来处理。