JS 怎么制作数字、字母、汉字混合的验证码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 怎么制作数字、字母、汉字混合的验证码相关的知识,希望对你有一定的参考价值。

/***************************************************/
/**效果倒是出来了,但是不是十分好看*********/
/**建议还是单选汉字或者去掉汉字看看*******/
/**************************************************/
<html>
<head>
<style type="text/css">
.code
background-image:url(code.jpg);
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;

.unchanged
border:0;

</style>
<script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码
function createCode()
code = "";
var codeLength = 100;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z','\u7684','\u4e00','\u4e86','\u662f','\u6211','\u4e0d','\u5728','\u4eba','\u4eec','\u6709','\u6765','\u4ed6','\u8fd9','\u4e0a','\u7740','\u4e2a','\u5730','\u5230','\u5927','\u91cc','\u8bf4','\u5c31','\u53bb','\u5b50','\u5f97','\u4e5f','\u548c','\u90a3','\u8981','\u4e0b','\u770b','\u5929','\u65f6','\u8fc7','\u51fa','\u5c0f','\u4e48','\u8d77','\u4f60','\u90fd','\u628a','\u597d','\u8fd8','\u591a','\u6ca1','\u4e3a','\u53c8','\u53ef','\u5bb6','\u5b66','\u53ea','\u4ee5','\u4e3b','\u4f1a','\u6837','\u5e74','\u60f3','\u751f','\u540c','\u8001','\u4e2d','\u5341','\u4ece','\u81ea','\u9762','\u524d','\u5934','\u9053','\u5b83','\u540e','\u7136','\u8d70','\u5f88','\u50cf','\u89c1','\u4e24','\u7528','\u5979','\u56fd','\u52a8','\u8fdb','\u6210','\u56de','\u4ec0','\u8fb9','\u4f5c','\u5bf9','\u5f00','\u800c','\u5df1','\u4e9b','\u73b0','\u5c71','\u6c11','\u5019','\u7ecf','\u53d1','\u5de5','\u5411','\u4e8b','\u547d','\u7ed9','\u957f','\u6c34','\u51e0','\u4e49','\u4e09','\u58f0','\u4e8e','\u9ad8','\u624b','\u77e5','\u7406','\u773c','\u5fd7','\u70b9','\u5fc3','\u6218','\u4e8c','\u95ee','\u4f46','\u8eab','\u65b9','\u5b9e','\u5403','\u505a','\u53eb','\u5f53','\u4f4f','\u542c','\u9769','\u6253','\u5462','\u771f','\u5168','\u624d','\u56db','\u5df2','\u6240','\u654c','\u4e4b','\u6700','\u5149','\u4ea7','\u60c5','\u8def','\u5206','\u603b','\u6761','\u767d','\u8bdd','\u4e1c','\u5e2d','\u6b21','\u4eb2','\u5982','\u88ab','\u82b1','\u53e3','\u653e','\u513f','\u5e38','\u6c14','\u4e94','\u7b2c','\u4f7f','\u5199','\u519b','\u5427','\u6587','\u8fd0','\u518d','\u679c','\u600e','\u5b9a','\u8bb8','\u5feb','\u660e','\u884c','\u56e0','\u522b','\u98de','\u5916','\u6811','\u7269','\u6d3b','\u90e8','\u95e8','\u65e0','\u5f80','\u8239','\u671b','\u65b0','\u5e26','\u961f','\u5148','\u529b','\u5b8c','\u5374','\u7ad9','\u4ee3','\u5458','\u673a','\u66f4','\u4e5d','\u60a8','\u6bcf','\u98ce','\u7ea7','\u8ddf','\u7b11','\u554a','\u5b69','\u4e07','\u5c11','\u76f4','\u610f','\u591c','\u6bd4','\u9636','\u8fde','\u8f66','\u91cd','\u4fbf','\u6597','\u9a6c','\u54ea','\u5316','\u592a','\u6307','\u53d8','\u793e','\u4f3c','\u58eb','\u8005','\u5e72','\u77f3','\u6ee1','\u65e5','\u51b3','\u767e','\u539f','\u62ff','\u7fa4','\u7a76','\u5404','\u516d','\u672c','\u601d','\u89e3','\u7acb','\u6cb3','\u6751','\u516b','\u96be','\u65e9','\u8bba','\u5417','\u6839','\u5171','\u8ba9','\u76f8','\u7814','\u4eca','\u5176','\u4e66','\u5750','\u63a5','\u5e94','\u5173','\u4fe1','\u89c9','\u6b65','\u53cd','\u5904','\u8bb0','\u5c06','\u5343','\u627e','\u4e89','\u9886','\u6216','\u5e08','\u7ed3','\u5757','\u8dd1','\u8c01','\u8349','\u8d8a','\u5b57','\u52a0','\u811a','\u7d27','\u7231','\u7b49','\u4e60','\u9635','\u6015','\u6708','\u9752','\u534a','\u706b','\u6cd5','\u9898','\u5efa','\u8d76','\u4f4d','\u5531','\u6d77','\u4e03','\u5973','\u4efb','\u4ef6','\u611f','\u51c6','\u5f20','\u56e2','\u5c4b','\u79bb','\u8272','\u8138','\u7247','\u79d1','\u5012','\u775b','\u5229','\u4e16','\u521a','\u4e14','\u7531','\u9001','\u5207','\u661f','\u5bfc','\u665a','\u8868','\u591f','\u6574','\u8ba4','\u54cd','\u96ea','\u6d41','\u672a','\u573a','\u8be5','\u5e76','\u5e95','\u6df1','\u523b','\u5e73','\u4f1f','\u5fd9','\u63d0','\u786e','\u8fd1','\u4eae','\u8f7b','\u8bb2','\u519c','\u53e4','\u9ed1','\u544a','\u754c','\u62c9','\u540d','\u5440','\u571f','\u6e05','\u9633','\u7167','\u529e','\u53f2','\u6539','\u5386','\u8f6c','\u753b','\u9020','\u5634','\u6b64','\u6cbb','\u5317','\u5fc5','\u670d','\u96e8','\u7a7f','\u5185','\u8bc6','\u9a8c','\u4f20','\u4e1a','\u83dc','\u722c','\u7761','\u5174','\u5f62','\u91cf','\u54b1','\u89c2','\u82e6','\u4f53','\u4f17','\u901a','\u51b2','\u5408','\u7834','\u53cb','\u5ea6','\u672f','\u996d','\u516c','\u65c1','\u623f','\u6781','\u5357','\u67aa','\u8bfb','\u6c99','\u5c81','\u7ebf','\u91ce','\u575a','\u7a7a','\u6536','\u7b97','\u81f3','\u653f','\u57ce','\u52b3','\u843d','\u94b1','\u7279','\u56f4','\u5f1f','\u80dc','\u6559','\u70ed','\u5c55','\u5305','\u6b4c','\u7c7b','\u6e10','\u5f3a','\u6570','\u4e61','\u547c','\u6027','\u97f3','\u7b54','\u54e5','\u9645','\u65e7','\u795e','\u5ea7','\u7ae0','\u5e2e','\u5566','\u53d7','\u7cfb','\u4ee4','\u8df3','\u975e','\u4f55','\u725b','\u53d6','\u5165','\u5cb8','\u6562','\u6389','\u5ffd','\u79cd','\u88c5','\u9876','\u6025','\u6797','\u505c','\u606f','\u53e5','\u533a','\u8863','\u822c','\u62a5','\u53f6','\u538b','\u6162','\u53d4','\u80cc','\u7ec6');

for(var i=0;i<codeLength;i++)
var charIndex = Math.floor(Math.random()*550);
code +=selectChar[charIndex];

if(code.length != codeLength)
createCode();

checkCode.value = code;


function validate ()
var inputCode = document.getElementById("input1").value.toUpperCase();

if(inputCode.length <=0)
alert("请输入验证码!");
return false;

else if(inputCode != code )
alert("验证码输入错误!");
createCode();
return false;

else
alert("OK");
return true;



</script>
</head>
<body onload="createCode();">
<input type="text" id="input1" />
<input type="text" id="checkCode" class="code" style="width: 1000px" /> <a href="#" onclick="createCode()">看不清楚</a><input id="Button1" onclick="validate();" type="button" value="确定" />

<script></script>
</body>
</html>
参考技术A /***************************************************/
/**效果倒是出来了,但是不是十分好看*********/
/**建议还是单选汉字或者去掉汉字看看*******/
/**************************************************/
<html>
<head>
<style type="text/css">
.code
background-image:url(code.jpg);
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;

.unchanged
border:0;

</style>
<script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码
function createCode()
code = "";
var codeLength = 100;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z','\u7684','\u4e00','\u4e86','\u662f','\u6211','\u4e0d','\u5728','\u4eba','\u4eec','\u6709','\u6765','\u4ed6','\u8fd9','\u4e0a','\u7740','\u4e2a','\u5730','\u5230','\u5927','\u91cc','\u8bf4','\u5c31','\u53bb','\u5b50','\u5f97','\u4e5f','\u548c','\u90a3','\u8981','\u4e0b','\u770b','\u5929','\u65f6','\u8fc7','\u51fa','\u5c0f','\u4e48','\u8d77','\u4f60','\u90fd','\u628a','\u597d','\u8fd8','\u591a','\u6ca1','\u4e3a','\u53c8','\u53ef','\u5bb6','\u5b66','\u53ea','\u4ee5','\u4e3b','\u4f1a','\u6837','\u5e74','\u60f3','\u751f','\u540c','\u8001','\u4e2d','\u5341','\u4ece','\u81ea','\u9762','\u524d','\u5934','\u9053','\u5b83','\u540e','\u7136','\u8d70','\u5f88','\u50cf','\u89c1','\u4e24','\u7528','\u5979','\u56fd','\u52a8','\u8fdb','\u6210','\u56de','\u4ec0','\u8fb9','\u4f5c','\u5bf9','\u5f00','\u800c','\u5df1','\u4e9b','\u73b0','\u5c71','\u6c11','\u5019','\u7ecf','\u53d1','\u5de5','\u5411','\u4e8b','\u547d','\u7ed9','\u957f','\u6c34','\u51e0','\u4e49','\u4e09','\u58f0','\u4e8e','\u9ad8','\u624b','\u77e5','\u7406','\u773c','\u5fd7','\u70b9','\u5fc3','\u6218','\u4e8c','\u95ee','\u4f46','\u8eab','\u65b9','\u5b9e','\u5403','\u505a','\u53eb','\u5f53','\u4f4f','\u542c','\u9769','\u6253','\u5462','\u771f','\u5168','\u624d','\u56db','\u5df2','\u6240','\u654c','\u4e4b','\u6700','\u5149','\u4ea7','\u60c5','\u8def','\u5206','\u603b','\u6761','\u767d','\u8bdd','\u4e1c','\u5e2d','\u6b21','\u4eb2','\u5982','\u88ab','\u82b1','\u53e3','\u653e','\u513f','\u5e38','\u6c14','\u4e94','\u7b2c','\u4f7f','\u5199','\u519b','\u5427','\u6587','\u8fd0','\u518d','\u679c','\u600e','\u5b9a','\u8bb8','\u5feb','\u660e','\u884c','\u56e0','\u522b','\u98de','\u5916','\u6811','\u7269','\u6d3b','\u90e8','\u95e8','\u65e0','\u5f80','\u8239','\u671b','\u65b0','\u5e26','\u961f','\u5148','\u529b','\u5b8c','\u5374','\u7ad9','\u4ee3','\u5458','\u673a','\u66f4','\u4e5d','\u60a8','\u6bcf','\u98ce','\u7ea7','\u8ddf','\u7b11','\u554a','\u5b69','\u4e07','\u5c11','\u76f4','\u610f','\u591c','\u6bd4','\u9636','\u8fde','\u8f66','\u91cd','\u4fbf','\u6597','\u9a6c','\u54ea','\u5316','\u592a','\u6307','\u53d8','\u793e','\u4f3c','\u58eb','\u8005','\u5e72','\u77f3','\u6ee1','\u65e5','\u51b3','\u767e','\u539f','\u62ff','\u7fa4','\u7a76','\u5404','\u516d','\u672c','\u601d','\u89e3','\u7acb','\u6cb3','\u6751','\u516b','\u96be','\u65e9','\u8bba','\u5417','\u6839','\u5171','\u8ba9','\u76f8','\u7814','\u4eca','\u5176','\u4e66','\u5750','\u63a5','\u5e94','\u5173','\u4fe1','\u89c9','\u6b65','\u53cd','\u5904','\u8bb0','\u5c06','\u5343','\u627e','\u4e89','\u9886','\u6216','\u5e08','\u7ed3','\u5757','\u8dd1','\u8c01','\u8349','\u8d8a','\u5b57','\u52a0','\u811a','\u7d27','\u7231','\u7b49','\u4e60','\u9635','\u6015','\u6708','\u9752','\u534a','\u706b','\u6cd5','\u9898','\u5efa','\u8d76','\u4f4d','\u5531','\u6d77','\u4e03','\u5973','\u4efb','\u4ef6','\u611f','\u51c6','\u5f20','\u56e2','\u5c4b','\u79bb','\u8272','\u8138','\u7247','\u79d1','\u5012','\u775b','\u5229','\u4e16','\u521a','\u4e14','\u7531','\u9001','\u5207','\u661f','\u5bfc','\u665a','\u8868','\u591f','\u6574','\u8ba4','\u54cd','\u96ea','\u6d41','\u672a','\u573a','\u8be5','\u5e76','\u5e95','\u6df1','\u523b','\u5e73','\u4f1f','\u5fd9','\u63d0','\u786e','\u8fd1','\u4eae','\u8f7b','\u8bb2','\u519c','\u53e4','\u9ed1','\u544a','\u754c','\u62c9','\u540d','\u5440','\u571f','\u6e05','\u9633','\u7167','\u529e','\u53f2','\u6539','\u5386','\u8f6c','\u753b','\u9020','\u5634','\u6b64','\u6cbb','\u5317','\u5fc5','\u670d','\u96e8','\u7a7f','\u5185','\u8bc6','\u9a8c','\u4f20','\u4e1a','\u83dc','\u722c','\u7761','\u5174','\u5f62','\u91cf','\u54b1','\u89c2','\u82e6','\u4f53','\u4f17','\u901a','\u51b2','\u5408','\u7834','\u53cb','\u5ea6','\u672f','\u996d','\u516c','\u65c1','\u623f','\u6781','\u5357','\u67aa','\u8bfb','\u6c99','\u5c81','\u7ebf','\u91ce','\u575a','\u7a7a','\u6536','\u7b97','\u81f3','\u653f','\u57ce','\u52b3','\u843d','\u94b1','\u7279','\u56f4','\u5f1f','\u80dc','\u6559','\u70ed','\u5c55','\u5305','\u6b4c','\u7c7b','\u6e10','\u5f3a','\u6570','\u4e61','\u547c','\u6027','\u97f3','\u7b54','\u54e5','\u9645','\u65e7','\u795e','\u5ea7','\u7ae0','\u5e2e','\u5566','\u53d7','\u7cfb','\u4ee4','\u8df3','\u975e','\u4f55','\u725b','\u53d6','\u5165','\u5cb8','\u6562','\u6389','\u5ffd','\u79cd','\u88c5','\u9876','\u6025','\u6797','\u505c','\u606f','\u53e5','\u533a','\u8863','\u822c','\u62a5','\u53f6','\u538b','\u6162','\u53d4','\u80cc','\u7ec6');

for(var i=0;i<codeLength;i++)
var charIndex = Math.floor(Math.random()*550);
code +=selectChar[charIndex];

if(code.length != codeLength)
createCode();

checkCode.value = code;


function validate ()
var inputCode = document.getElementById("input1").value.toUpperCase();

if(inputCode.length <=0)
alert("请输入验证码!");
return false;

else if(inputCode != code )
alert("验证码输入错误!");
createCode();
return false;

else
alert("OK");
return true;



</script>
</head>
<body onload="createCode();">
<input type="text" id="input1" />
<input type="text" id="checkCode" class="code" style="width: 1000px" /> <a href="#" onclick="createCode()">看不清楚</a><input id="Button1" onclick="validate();" type="button" value="确定" />

<script></script>
</body>
</html>
参考技术B 这个我到是没有写过,但是我可以在后台程序里写上验证码得原代码,再由JS去调用。源代码写上..import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;public class CheckCodeServlet extends HttpServlet
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
response.setContentType("image/jpeg");
BufferedImage image = new BufferedImage(60, 20,
BufferedImage.TYPE_INT_RGB);
Random r = new Random();
Graphics g = image.getGraphics();
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.fillRect(0, 0, 60, 20);
g.setColor(new Color(0, 0, 0));
String number = String.valueOf(r.nextInt(99999));
HttpSession session = request.getSession();
session.setAttribute("number", number);
g.drawString(number, 5, 15);
OutputStream os = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);
encoder.encode(image);



希望对你有帮助

PHP算式验证码和汉字验证码的实现方法

在PHP网站开发中,验证码可以有效地保护我们的表单不被恶意提交,但是如果不使用算式验证码或者汉字验证码,仅仅使用简单的字母或者数字验证码,这样的验证码方案真的安全吗?

大家知道简单数字或者字母验证码很容易被破解,但是算式验证码或者中文汉字验证码不容易被破解,所以建议大家在使用验证码的时候,尽量用算式验证码或者中文汉字验证码。

下面是我写的两种验证码代码,有用到的朋友可以参考下:

1.算式验证码:

<?php
session_start();
header("Content-type: image/png");
$num1 = mt_rand(0,9);//第一位数
$num2 = mt_rand(1,9);//第二位数
$type_str = "+-*";//方法字符串集合
$type = substr($type_str,rand(0,2),1);//随机方法
$change = mt_rand(1,3);
if($change==1){
 $code = "$num1$type$num2=?";
 $result = "\$verifyCode=$num1$type$num2;";
 eval($result);
 $_SESSION[‘authnum_session‘] = $verifyCode; 
}elseif($change==2){
 $result = "\$verifyCode=$num1$type$num2;";
 eval($result);
    $code = $num1.$type."_=".$verifyCode;
 $_SESSION[‘authnum_session‘] = $num2; 
}elseif($change==3){
 $result = "\$verifyCode=$num1$type$num2;";
 eval($result);
    $code = "_".$type.$num2."=".$verifyCode;
 $_SESSION[‘authnum_session‘] = $num1; 
}
$im = imagecreate(68,28);  
$black = imagecolorallocate($im, 0,0,0);    
$white = imagecolorallocate($im, 255,255,255);
$gray = imagecolorallocate($im, 200,200,200);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im,0,0,$white);       
imagestring($im, 5, 10, 8, $code, $black);   
for($i=0;$i<70;$i++) {
 imagesetpixel($im, mt_rand(0, 58) , mt_rand(0, 28) , $black);
 imagesetpixel($im, mt_rand(0, 58) , mt_rand(0, 28) , $red);
 imagesetpixel($im, mt_rand(0, 58) , mt_rand(0, 28) , $gray);
}
imagepng($im);
imagedestroy($im);
?>

 

2.中文汉字验证码:

<?php
session_start();
$ch_str="的一是在了不和有大这主中人上为们地个用工时要动国产以我到他会作来分生对于学下级就年阶义发成部民可出能方进同行面说种过命度革而多子后自社加小机也经力线本电高量长党得实家定深法表着水理化争现所二起政三好十战无农使性前等反体合斗路图把结第里正新开论之物从当两些还天资事队批如应形想制心样干都向变关点育重其思与间内去因件日利相由压员气业代全组数果期导平各基或月毛然问比展那它最及外没看治提五解系林者米群头意只明四道马认次文通但条较克又公孔领军流入接席位情运器并飞原油放立题质指建区验活众很教决特此常石强极土少已根共直团统式转别造切九你取西持总料连任志观调七么山程百报更见必真保热委手改管处己将修支识病象几先老光专什六型具示复安带每东增则完风回南广劳轮科北打积车计给节做务被整联步类集号列温装即毫知轴研单色坚据速防史拉世设达尔场织历花受求传口断况采精金界品判参层止边清至万确究书术状厂须离再目海交权且儿青才证低越际八试规斯近注办布门铁需走议县兵固除般引齿千胜细影济白格效置推空配刀叶率述今选养德话查差半敌始片施响收华觉备名红续均药标记难存测士身紧液派准斤角降维板许破述技消底床田势端感往神便贺村构照容非搞亚磨族火段算适讲按值美态黄易彪服早班麦削信排台声该击素张密害侯草何树肥继右属市严径螺检左页抗苏显苦英快称坏移约巴材省黑武培著河帝仅针怎植京助升王眼她抓含苗副杂普谈围食射源例致酸旧却充足短划剂宣环落首尺波承粉践府鱼随考刻靠够满夫失包住促枝局菌杆周护岩师举曲春元超负砂封换太模贫减阳扬江析亩木言球朝医校古呢稻宋听唯输滑站另卫字鼓刚写刘微略范供阿块某功套友限项余倒卷创律雨让骨远帮初皮播优占死毒圈伟季训控激找叫云互跟裂粮粒母练塞钢顶策双留误础吸阻故寸盾晚丝女散焊功株亲院冷彻弹错散商视艺灭版烈零室轻血倍缺厘泵察绝富城冲喷壤简否柱李望盘磁雄似困巩益洲脱投送奴侧润盖挥距触星松送获兴独官混纪依未突架宽冬章湿偏纹吃执阀矿寨责熟稳夺硬价努翻奇甲预职评读背协损棉侵灰虽矛厚罗泥辟告卵箱掌氧恩爱停曾溶营终纲孟钱待尽俄缩沙退陈讨奋械载胞幼哪剥迫旋征槽倒握担仍呀鲜吧卡粗介钻逐弱脚怕盐末阴丰编印蜂急拿扩伤飞露核缘游振操央伍域甚迅辉异序免纸夜乡久隶缸夹念兰映沟乙吗儒杀汽磷艰晶插埃燃欢铁补咱芽永瓦倾阵碳演威附牙芽永瓦斜灌欧献顺猪洋腐请透司危括脉宜笑若尾束壮暴企菜穗楚汉愈绿拖牛份染既秋遍锻玉夏疗尖殖井费州访吹荣铜沿替滚客召旱悟刺脑措贯藏敢令隙炉壳硫煤迎铸粘探临薄旬善福纵择礼愿伏残雷延烟句纯渐耕跑泽慢栽鲁赤繁境潮横掉锥希池败船假亮谓托伙哲怀割摆贡呈劲财仪沉炼麻罪祖息车穿货销齐鼠抽画饲龙库守筑房歌寒喜哥洗蚀废纳腹乎录镜妇恶脂庄擦险赞钟摇典柄辩竹谷卖乱虚桥奥伯赶垂途额壁网截野遗静谋弄挂课镇妄盛耐援扎虑键归符庆聚绕摩忙舞遇索顾胶羊湖钉仁音迹碎伸灯避泛亡答勇频皇柳哈揭甘诺概宪浓岛袭谁洪谢炮浇斑讯懂灵蛋闭孩释乳巨徒私银伊景坦累匀霉杜乐勒隔弯绩招绍胡呼痛峰零柴簧午跳居尚丁秦稍追梁折耗碱殊岗挖氏刃剧堆赫荷胸衡勤膜篇登驻案刊秧缓凸役剪川雪链渔啦脸户洛孢勃盟买杨宗焦赛旗滤硅炭股坐蒸凝竟陷枪黎救冒暗洞犯筒您宋弧爆谬涂味津臂障褐陆啊健尊豆拔莫抵桑坡缝警挑污冰柬嘴啥饭塑寄赵喊垫康遵牧遭幅园腔订香肉弟屋敏恢忘衣孙龄岭骗休借丹渡耳刨虎笔稀昆浪萨茶滴浅拥穴覆伦娘吨浸袖珠雌妈紫戏塔锤震岁貌洁剖牢锋疑霸闪埔猛诉刷狠忽灾闹乔唐漏闻沈熔氯荒茎男凡抢像浆旁玻亦忠唱蒙予纷捕锁尤乘乌智淡允叛畜俘摸锈扫毕璃宝芯爷鉴秘净蒋钙肩腾枯抛轨堂拌爸循诱祝励肯酒绳穷塘燥泡袋朗喂铝软渠颗惯贸粪综墙趋彼届墨碍启逆卸航雾冠丙街莱贝辐肠付吉渗瑞惊顿挤秒悬姆烂森糖圣凹陶词迟蚕亿矩";
$len = mb_strlen($ch_str,"utf-8");//汉字长度
$str = array();
for($i=0;$i<4;$i++){
   $pos = mt_rand(0,$len-5);//开始位置
   $str[] = mb_substr($ch_str,$pos,1,"utf-8");
}
$authnum_session = implode("",$str);
$_SESSION[‘authnum_session‘] = $authnum_session;   //记录到session
Header("Content-type: image/PNG");
//图片的长和高
$image_x=100;
$image_y=50;
$im = imagecreate($image_x,$image_y);
//这里取图片底色为白色
$bkg = ImageColorAllocate($im,255,255,255);
//显示的字体样式,这个要把文件放到对应的目录中,如果你没有文件就去window的字体文件中找一个吧。
$fnt = "simhei.ttf";
//为图像分配一些颜色
$white=ImageColorAllocate($im,234,185,95);
//在图片上画椭圆弧,指定下坐标点
imagearc($im, 150, 8, 20, 20, 75, 170, $white);
imagearc($im, 180, 7,50, 30, 75, 175, $white);
//在图片上画一条线段,指定下坐标点
imageline($im,20,20,180,30,$white);
imageline($im,20,18,170,50,$white);
imageline($im,25,50,80,50,$white);
//乱点的数量
$noise_num=3000;
$line_num=50;
//各种混乱字符的颜色
$rectangle_color=imagecolorallocate($im,0xAA,0xAA,0xAA);
$noise_color=imagecolorallocate($im,0x00,0x00,0x00);
$font_color=imagecolorallocate($im,0x00,0x00,0x00);
for($i=0;$i<$noise_num;$i++)
{
    //在一个坐标点上画一个单一像素,这个点上面定义了,是黑色的。
    //imagesetpixel($im,mt_rand(0,$image_x),mt_rand(0,$image_y),$noise_color);
}
for($i=0;$i<$line_num;$i++)
{
    $line_color=imagecolorallocate($im,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
    //在两个坐标点间画一条线,颜色在上面定义
    imageline($im,mt_rand(0,$image_x),mt_rand(0,$image_y),mt_rand(0,$image_x),mt_rand(0,$image_y),$line_color);   
}
for ($i=0;$i<4;$i++)
{
    ImageTTFText($im, rand(18,20), rand(0,20), rand(($image_x/4)*$i+$image_x/100,($image_x/4)*$i+$image_x/8), rand($image_y/2+$image_y/10,$image_y/2+$image_y/5), $font_color, $fnt, $str[$i]);
 
}
ImagePNG($im);
ImageDestroy($im);
?>


字体文件:simhei.rar点击此处本站下载

注意:

中文汉字验证码单独执行,然后获取session会发现验证码和session内容不一致。但是在img 标签中src属性中引用这个中文汉字验证码文件时,然后获取session,这时两者内容时一致的。



以上是关于JS 怎么制作数字、字母、汉字混合的验证码的主要内容,如果未能解决你的问题,请参考以下文章

js 四位数字字母混合验证码

数字字母混合的4位验证码

php实现验证码(数字字母汉字)

字母数字字母汉字验证码 (java)

若干位随机数字字母混合验证码

通过php生成纯数字字母数字图片纯汉字的随机数验证码