使用JavaScript,如何生成汉字验证码?

JavaScript020

使用JavaScript,如何生成汉字验证码?,第1张

简单代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JS生成验证码</title>

<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 = 6//验证码的长度

var checkCode = document.getElementById("checkCode")

var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z')//所有候选组成验证码的字符,当然也可以用中文的

for (var i = 0i <codeLengthi++) {

var charIndex = Math.floor(Math.random() * 36)

code += selectChar[charIndex]

}

//alert(code)

if (checkCode) {

checkCode.className = "code"

checkCode.value = code

}

}

function validate() {

var inputCode = document.getElementById("input1").value

if (inputCode.length <= 0) {

alert("请输入验证码!")

} else if (inputCode != code) {

alert("验证码输入错误!")

createCode()//刷新验证码

} else {

alert("^-^ OK")

}

}

</script>

</head>

<body onload="createCode()">

<form action="#">

<input type="text" id="input1" /><input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />

<input id="Button1" onclick="validate()" type="button" value="确定" />

</form>

</body>

</html>

注意别用在实际生产项目中

<html> 

  <head> 

    <title>纯字验证码</title> 

    <meta http-equiv='content-type' content='text/htmlcharset=utf-8'/> 

    <script type='text/javascript' src='jquery-1.7.2.js'></script> 

    <script type='text/javascript'> 

    var code  //在全局定义验证码  

       

    function createCode(){ 

       code = ""  

       var codeLength = 4//验证码的长度  

       var checkCode = document.getElementById("code")  

       var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  

       'S','T','U','V','W','X','Y','Z')//随机数  

       for(var i = 0 i < codeLength i++) {//循环操作  

        var index = Math.floor(Math.random()*36)//取得随机数的索引(0~35)  

        code += random[index]//根据索引取得随机数加到code上  

      }  

      checkCode.value = code//把code值赋给验证码  

    } 

    //校验验证码  

    function validate(){  

      var inputCode = document.getElementById("input").value.toUpperCase() //取得输入的验证码并转化为大写     

      if(inputCode.length <= 0) { //若输入的验证码长度为0  

        alert("请输入验证码!") //则弹出请输入验证码  

      }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  

        alert("验证码输入错误!@_@") //则弹出验证码输入错误  

        createCode()//刷新验证码  

        document.getElementById("input").value = ""//清空文本框  

      }else { //输入正确时  

        alert("合格!^-^") 

      } 

    } 

    </script> 

    <style type='text/css'> 

    #code{ 

      font-family:Arial,宋体 

      font-style:italic 

      color:green 

      border:0 

      padding:2px 3px 

      letter-spacing:3px 

      font-weight:bolder 

    } 

    </style> 

  </head> 

  <body onload='createCode()'> 

    <div>验证码:  

      <input type = "text" id = "input"/>  

      <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' /> 

      <input type = "button" value = "验证" onclick = "validate()"/> 

    </div>  

  </body> 

</html>