javascript 获取随机验证码

JavaScript023

javascript 获取随机验证码,第1张

<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>

方法/步骤

打开网页编辑器编写div+css代码，先把界面做好，然后再做功能，代码如下所示：

<form name="form1">

请输入要产生的验证码的位数：<input type="text" name="digit" id="digit">

<br><br>

<input type="button" value="生成" onClick="deal()">

&nbsp<input type="button" value="刷新" onClick="qc()">

<br><br>

<div id="result"></div>

</form>

请点击输入图片描述

写好之后，我们写CSS代码，然后再调试一下，争取在前台显示的美观一些。CSS代码如下所示：

<style>

body{background:#ccc }

form{margin-left:20%margin-top:10%}

</style>

请点击输入图片描述

弄好之后用浏览器打开，界面如下图所示：

请点击输入图片描述

弄好前端界面之后，我们就需要写JS了，步骤主要如下所示，首先我们先定义一个参数，这个参数是我们输入文本框的数字，生成随机数用到了random方法，先看第一个方法，第一个方法我们用for循环来显示出随机数的个数。代码如下所示：

function cg(digit)

{

var result=""

for(i=0i<parseInt(digit)i++)

{

result=result+(parseInt(Math.random()*10)).toString()

}

return  result

}

请点击输入图片描述

第一个函数写好后我们来看第二个，第二个函数是输出生成的验证码，代码很少：如下所示（含删除代码）

function deal()

{

result.innerHTML="产生的验证码是："+cg(form1.digit.value)

}

function qc()

{

form1.digit.value=""

}

请点击输入图片描述

写好之后，我们验证一下，我在文本框内输入5，结果输出了5个数字，结果显示没有错误。

请点击输入图片描述

当然这么写也是有BUG的，例如输入0、负数、或者小于1的小数都不会生成验证码。如果大家有兴趣，可以修改这些BUG。

请点击输入图片描述

如果你使用的是jquery才cookie插件的话直接$.cookie("cookies名称"，"验证码值")；就可以了。

如果是原生JS的话document.cookie="cookies名称="+验证码值