头像

JavaScript实现验证码功能

来源:https://www.daimasucai.com/share/14.html 2017-04-27浏览(52)  评论0

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

  1、一个简单的例子

  新建 test.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、点击的时候不会移动位置的代码:

  看不清?

  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


标签: 验证码
声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/share/14.html

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>