JS验证码实现代码

 更新时间:2017年09月14日 10:32:59   作者:Honey_Badger  
本文通过实例代码给大家分享基于javascript实现的验证码功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧

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

<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验证码实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 中文字符串截取的js函数代码

    中文字符串截取的js函数代码

    有时在显示某段文字的时候,可能会太长,影响我们页面的显示效果,如果仅是英文,那么我们可以用String.substring(start, end)函数就已经够用了,但是通常我们都会遇到既有英文,又有汉字的情况
    2013-04-04
  • js实现带圆角的两级导航菜单效果代码

    js实现带圆角的两级导航菜单效果代码

    这篇文章主要介绍了js实现带圆角的两级导航菜单效果代码,涉及javascript鼠标事件及页面元素样式动态变换技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • JS中BOM相关知识点总结(必看篇)

    JS中BOM相关知识点总结(必看篇)

    下面小编就为大家带来一篇JS中BOM相关知识点总结(必看篇)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-11-11
  • JS中的Replace方法使用经验分享

    JS中的Replace方法使用经验分享

    本文给大家分享的是我们在使用javascript中的replace方法的时候需要注意的一个事项,我就是没有注意到,才被这个bug烦了好久,这里记录下来,有需要的小伙伴可以参考下。
    2015-05-05
  • 微信小程序实现之手势锁功能实例代码

    微信小程序实现之手势锁功能实例代码

    这篇文章主要介绍了微信小程序实现之手势锁功能的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 原生JavaScript实现批量获取表单数据

    原生JavaScript实现批量获取表单数据

    这篇文章主要为大家详细介绍了如何使用原生JavaScript实现批量获取表单数据,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • js原生实现移动端手指滑动轮播图效果的示例

    js原生实现移动端手指滑动轮播图效果的示例

    下面小编就为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript变量和变换详情

    JavaScript变量和变换详情

    这篇文章主要介绍了JavaScript变量和变换详情,文章基于JavaScript的相关资料展开相关内容需要的小伙伴可以惨一下
    2022-04-04
  • JS实现探测网站链接的方法【测试可用】

    JS实现探测网站链接的方法【测试可用】

    这篇文章主要介绍了JS实现探测网站链接的方法,通过网站返回错误响应触发onerror时间来判断网站链接的可用性,非常简便实用,需要的朋友可以参考下
    2016-11-11
  • Js获取table当前tr行的值的代码

    Js获取table当前tr行的值的代码

    table tr行内td里面的input的值
    2009-12-12

最新评论