纯JS实现的验证码-可自定义长度和字符

纯JS实现的验证码-可自定义长度和字符

纯JS实现的页面验证码-可自定义长度和验证码字符

生成验证码的函数

<script type="text/javascript">
var code;
function createCode() 
{
 code = "";
 var codeLength = 4; //验证码的长度
 var checkCode = document.getElementById("checkCode");
 var codeChars = 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',
      '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 charNum = Math.floor(Math.random() * 52);
  code += codeChars[charNum];
 }
 if(checkCode) 
 {
  checkCode.className = "code";
  checkCode.innerHTML = code;
 }
}
</script>

登录页面代码:

<body onload="createCode()">
<form id="form1" action="loginCheck.jsp" onsubmit="return validateCode()">
 <div>
  <table border="0" cellspacing="5" cellpadding="5" >
   <tr>
    <td>用户名:</td>
    <td><input type="text" name="username" id="username"></td>
    <td></td>
   </tr>
   <tr>
     <td>密 码:</td>
     <td><input type="text" name="pwd" id="pwd"></td>
     <td></td>
   </tr>
   <tr>
    <td>验证码:</td>
    <td><input style="float:left;" type="text"  id="inputCode" /></td>
    <td><div class="code" id="checkCode" onclick="createCode()" ></div><a href="#" onclick="createCode()">看不清换一张</a></td>
   </tr>
   <tr>
    <td></td>
    <td><input id="Button1"  type="submit" value="确定" /></td>
    <td></td>
   </tr>
  </table>
 </div>
</form>
</body>

检验验证码是否输入和输入是否正确的validateCode()函数代码:

function validateCode() 
{
 var inputCode=document.getElementById("inputCode").value;
 if(inputCode.length <= 0) 
 {
  alert("请输入验证码!");
  return false;
 }
 else if(inputCode.toUpperCase() != code.toUpperCase()) 
 {
   alert("验证码输入有误!");
   createCode();
   return false;
 }
 else 
 { 
  return true;
 }    
}

美化验证码CSS:

<style type="text/css">
.code 
{
 background:url(code_bg.jpg);
 font-family:Arial;
 font-style:italic;
 color:blue;
 font-size:18px;
 border:0;
 padding:2px 3px;
 letter-spacing:3px;
 font-weight:bolder;
 float:left;
 cursor:pointer;
 width:100px;
 height:18px;
 line-height:18px;
 text-align:center;
 vertical-align:middle;
}
a 
{
 text-decoration:none;
 font-size:12px;
 color:#288bc4;
}
a:hover 
{
 text-decoration:underline;
}
</style>





纯JS实现的验证码-可自定义长度和字符|www.125jz.com



用户名:
密 码:
验证码:

看不清换一张



125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2767.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年10月2日 上午8:45
下一篇 2018年10月10日 下午2:48

99%的人还看了以下文章

  • 第6课:学习更多HTML元素

    到现在,你有没有独立完成过一个网页?你可以的,看看下面的例子: <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    2018年1月20日
    2.5K0
  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    1.3K0
  • CSS常用类/ID命名规范

    书写规范请查看《CSS语法及命名规范(入门)》,本文介绍常用类/ID命名规范,CSS文件命名规范,如页面主体:main 内容:content 标签页:tab  章列表:list 信息:msg   标题:title   热点:hot 新闻:news注册:regsiter 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:cop…

    2019年3月14日
    4.6K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    2.5K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    2.0K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    1.3K0

发表回复

登录后才能评论