zoukankan      html  css  js  c++  java
  • 基于JavaScript实现验证码功能

    本文实例为大家分享了Javascript实现验证码的具体代码,供大家参考,具体内容如下。

    1、一个简单的例子

    新建 test.html
    <!DOCTYPE html> 
    <html>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <head>  
      <title>验证码</title>   
      <script src = "checkCode.js">  </script>  
    </head>  
    <body>  
      <div>  
        <input type = "text" id = "input"/>  
        <input type = "button" id="code" onclick="createCode()"/>  
        <input type = "button" value = "验证" onclick = "validate()"/>  
      </div>  
    </body>  
    </html>  

    新建 checkCode.js

    var code ; //在全局定义验证码   
    window.onload = 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("Empty Code!"); //则弹出请输入验证码  
      }      
      else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
        alert("Error Code"); //则弹出验证码输入错误  
        createCode();//刷新验证码  
        document.getElementById("input").value = "";//清空文本框  
      }      
      else { //输入正确时  
        alert("OK"); //弹出^-^  
      }        

    }  

    2、点击的时候不会移动位置的代码:
    <p class="red"><a href="javascript:;" rel="external nofollow" onclick="createCode()">看不清?</a></p> 

    完整案例演示下载:http://www.jsdaima.com/p-613.html

  • 相关阅读:
    JavaWeb核心编程之(四.1)JSP
    一起来说 Vim 语
    你应该知道的基础 Git 命令
    Git 系列(五):三个 Git 图形化工具
    Git 系列(四):在 Git 中进行版本回退
    Git 系列(三):建立你的第一个 Git 仓库
    Git 系列(二):初步了解 Git
    Git 系列(一):什么是 Git
    JavaWeb核心编程之(三.6)HttpServlet
    多线程:子线程执行完成后通知主线程
  • 原文地址:https://www.cnblogs.com/hekai123/p/7456585.html
Copyright © 2011-2022 走看看