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

  • 相关阅读:
    解决Linux ssh登录马上退出问题
    FineReport实线java报表填报录入的效果图
    CCEditBox/CCEditBoxImplMac
    Android图片异步载入框架Android-Universal-Image-Loader
    HYAppFrame(WinForm框架源代码)安装部署指南
    ASP.NET Web Api 2 接口API文档美化之Swagger
    Android OTA在线升级一(架构分析)【转】
    Android进程间通信(IPC)机制Binder简要介绍和学习计划【转】
    Linux内核源码中的likely和unlikely释疑【转】
    Android蓝牙串口通讯【转】
  • 原文地址:https://www.cnblogs.com/hekai123/p/7456585.html
Copyright © 2011-2022 走看看