js+html制作简单验证码

更新时间：2017年02月16日 08:58:56 投稿：lijiao

这篇文章主要为大家详细介绍了js结合html制作简单验证码的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript制作验证码的具体代码，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8"/>
<title>js验证码</title>
<style type="text/css">
 #login{
  width:50px;
  height:30px;
  line-height:30px;
  margin:0 auto;
  background-color:#eee;
  text-align:center;
  color:red;
 }
 p{
  width:75px;
  height:30px;

  margin:0 auto;
 }
 
</style>
</head>
<body>
<p>验证码：</p>
<div id="login" onclick="show()"><a href="#"></a></div>
<script type="text/javascript">
  function codes(n){
      var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
      var b="";
    for (var i = 0;i<n;i++){
      var index=Math.floor(Math.random()*62);
       b+=a.charAt(index);

    }
    return b;
    };
    function show(){
      document.getElementById("login").innerHTML=codes(4);
    
  }
  window.onload=show;


</script>

</body>
</html>

另一个js验证码的部分代码：

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值赋给验证码 
} 
//校验验证码 
document.getElementById("Yzm").addEventListener("change",validate); 
 
function validate(){ 
 var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写 
 if(inputCode.length <= 0) { //若输入的验证码长度为0 
 alert("请输入验证码！"); //则弹出请输入验证码 
 $("#Yzm").focus(); 
 YZM = false; 
 } 
 else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 
 alert("验证码输入错误！@_@"); //则弹出验证码输入错误 
 createCode();//刷新验证码 
 $("#Yzm").val("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span> 
 $("#Yzm").focus();//重新聚焦验证码框 
 YZM = false; 
 } 
 else { //输入正确时 
 $("#Yzm").blur();//绑定验证码输入正确时要做的事 
 YZM = true; 
 
 } 
};

附效果图：

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

您可能感兴趣的文章:

JavaScript中数据结构与算法(五)：经典KMP算法
这篇文章主要介绍了JavaScript中数据结构与算法(五)：经典KMP算法,本文详解了KMP算法的方方面在,需要的朋友可以参考下
2015-06-06
详解JS如何进行变量解构
JavaScript中,可以使用解构赋值的方式来对数组或者对象进行变量解构,下面小编就来为大家详细介绍一下JavaScript实现数组或者对象解构的方法吧
2023-11-11
PHP抓取HTTPS内容和错误处理的方法
这篇文章主要介绍了PHP抓取HTTPS内容的实现方法，以及在抓取的时候遇到的一个HTTPS问题的处理办法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-09-09
微信小程序wxs日期时间处理的实现示例
最近在做一个列表的时候，涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例，分享给大家，感兴趣的可以了解一下
2021-07-07
一文详解MySQL5.7与MySQL8之间的区别
MySQL作为最常用的开源关系型数据库管理系统之一,一直在不断发展和改进,其中,MySQL 5.7和MySQL 8是两个备受关注的版本,它们之间存在一些关键的差异,本文将深入探讨这两个版本之间的主要差异,需要的朋友可以参考下
2023-11-11
微信小程序项目总结之点赞删除列表分享功能
这篇文章主要介绍了微信小程序项目总结之点赞删除列表分享功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
el-input 密码自动填充的方法汇总
在开发 Web 应用时,通常需要避免浏览器自动填充密码,以下是一些可行的解决方案,特别针对使用 Element UI 框架的 el-input 组件,下面给大家分享el-input 密码自动填充的方法,感兴趣的朋友跟随小编一起看看吧
2024-08-08
微信小程序中的生命周期与生命周期函数浅析介绍
这篇文章主要介绍了微信小程序中的生命周期与生命周期函数的介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
这篇文章主要介绍了微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
js自定义鼠标右键的实现原理及源码
这篇文章主要介绍了js自定义鼠标右键的实现原理及源码,需要的朋友可以参考下
2014-06-06

js+html制作简单验证码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具