JS验证码实现代码

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<script language="javascript">
var code; //在全局 定义验证码
function createCode()
{ //创建验证码函数
 code = "";
 var codeLength =4;//验证码的长度
 var selectChar = 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 charIndex =Math.floor(Math.random()*36);
 code +=selectChar[charIndex];
 }
// 设置验证码的显示样式，并显示
 document.getElementById("discode").style.fontFamily="Fixedsys"; //设置字体
 document.getElementById("discode").style.letterSpacing="5px"; //字体间距
 document.getElementById("discode").style.color="#0ab000"; //字体颜色
 document.getElementById("discode").innerHTML=code; // 显示
}
function but()
{//验证验证码输入是否正确
 var val1=document.getElementById("t1").value;
 var val2=code;
 if(val1!=val2){
  alert("验证码错误!");
 document.getElementById('t1').value="";
  }
 }
</script>

验证码框

 <div class="input">
    <input id="t1" type="text" name="u" placeholder="验证码" onblur="but()" />
    <span id="discode"></span>
    <input type="button" value="换一换" class="c" style="height:20px;"onClick="createCode()">
    </div>

效果

总结

以上所述是小编给大家介绍的JS验证码实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于javascript实现数字英文验证码

    本文实例为大家分享了js实现数字英文验证码的具体代码,供大家参考,具体内容如下 <html> <head> <style type="text/css"> .code{ background-image:url(111.jpg); font-family:Arial,宋体; font-style:italic; color:green; border:0; padding:2px 3px; letter-spacing:3px; font-weigh

  • Nodejs实现短信验证码功能

    使用Nodejs的开发者愈来越多,基于Nodejs的后台开发也多了起来,像短信验证码.短信群发.国际短信这些需求,完全可以采用第三方接口来实现,云片就提供了这样的接口. Nodejs // 修改为您的apikey.可在官网(https://www.yunpian.com)登录后获取 var https = require('https'); var qs = require('querystring'); var apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

  • js验证手机号、密码、短信验证码代码工具类

    本文实例为大家分享了js验证手机号.密码.短信验证码的代码工具类,供大家参考,具体内容如下 代码工具类 /** * 参数较验 * * */ var verification = { stop : false, //倒计时 //验证手机号 phone : function (tel, id) { if ("" == tel || !tel) { mui.toast('手机号不可以为空!'); } else { var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;

  • JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes

  • js+html制作简单验证码

    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; backgr

  • js实现手机发送验证码功能

    js实现手机发送验证码功能

    效果图: 代码如下: <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>发送验证码倒计时功能</title> <style> @charset "utf-8"; *{ margin:0; paddin

  • Nodejs 发送Post请求功能(发短信验证码例子)

    直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var

  • JS验证码实现代码

    JS验证码实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script language="javascript"> var code; //在全局 定义验证码 function createCode() { //创建验证码函数 code = ""; var codeLength =4;//验证码的长度 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h

  • 基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

    基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

    最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,先把效果图展示出来给大家看看 效果图: 输入验证码 粘贴图片输入完毕 下面就把实现过程奉献给大家 第一步:编写HTML代码 <div class="main-out"> <p class="identifying-title">输入企业提供的

  • javascript 验证码生成代码 推荐学习

    javascript 验证码实现代码_我们测试 .code {}{ background-image:url(code.jpg); font-family:Arial; font-style:italic; color:Red; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; } .unchanged {}{ border:0; } var code ; //在全局 定义验证码 function createC

  • JS 验证码功能的三种实现方式

    摘要: 我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验证码才能登陆成功,但是也有一些其他验证码功能也在使用,所以,我就想着来集中记录一下,希望对大家有所帮助... 一.数字短信验证码 思路: a.两个文本框+一个获取验证码按钮,文本框用来输入手机号和获取到的验证码,按钮负责点击和记录倒计时: b.js书写定时器setTimeout,进行60秒验证码失

  • 多种类型jQuery网页验证码插件代码实例

    html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,m

  • java生成图片验证码实例代码

    关于java图片验证码的文章最近更新了不少,帮助大家掌握java验证码的生成技术,下文为大家分享了java生成图片验证码最简单的方法,供大家参考. 现在各行业在定制系统时都会考虑到机器注册,现在最有效的方式就是输入验证.现在的验证方式有很多种: 一.问题验证,其实也是图片验证,在图片上生成问题,然后输入框输入答案. 二.图片验证,输入图片上展示的文字信息. 三.短信验证,比较繁杂,用户也不怎么喜欢. 四.还有就是百度最新的验证方式.图片上生成文字,然后出现一个文字点击框,选择你在验证图片上看到的

  • js 中rewrap-ajax.js插件实例代码

    最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好. 当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起. 现在我们说说整体的设计结构,版本一是好友收集整理的方法,基础的写法已经成型,调用nativeAjax方放即可,方法内部有三个参数,第一个为ajax的属性,第二个为成功的函数,第三个为错误的函数,具体如下: nativeA

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

  • 黑帽seo劫持程序,js劫持搜索引擎代码

    今天在浏览网页时无意中发现了这段JS劫持搜索引擎代码.劫持搜索引擎正常搜索过来的流量,这是黑帽seo常用的劫持方法.特意解密出来供大家了解其劫持原理. 源码打印帮助 <SCRIPT language="<span id="0_nwp" style="width: auto; height: auto; float: none;"><a id="0_nwl" href="http://cpro.baidu

  • 异步加载JS、CSS代码（推荐）

    我的风格你懂得,具体详情介绍如下 关键代码如下所示: function AsyncLoad(V_tag,V_src) { if (V_tag == "script") { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x.pare

随机推荐