各种语言的验证码代码[js]

作者: unvs 分类: ASP.NET 发布时间: 2011-03-11 23:26 ė15,893 views 61条评论

js验证码:

原理:页面放置一个验证码框、一个文本框、一个按钮

1、定义一个全局变量,验证码框调用触发函数:createCode();

2、函数里面的参数及数字生成就不用说明了吧,定义几个变量,一个为验证码长度、一个为获得控件ID,一个为字符数组,然后用for循环随机得到一个字符串,最后赋值到控件ID上,这样一个验证码就出来了;

3、validate()函数,是点击确定按钮,触发的js事件,验证填写的文本框中的内容,是否与全局变量code一致,如果一致,则提示OK,否则错误;

4、OVER,直接可以拿去用了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    
<title>无标题页</title>
    
<style type="text/css">
         .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;
        
}
    
</style>
    
<script language="javascript" type="text/javascript">
    
     
var code ; //在全局 定义验证码
     function createCode()
      {
        code
= "";
       
var codeLength = 6;//验证码的长度
       var checkCode = document.getElementById("checkCode");
       
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];
       
       
        }
//        alert(code);
       if(checkCode)
        {
          checkCode.className
="code";
          checkCode.value
= code;
        }
       
      }
//        createcode()结束;     


      
function validate ()
      {
       
var inputCode = document.getElementById("input1").value;
       
if(inputCode.length <=0)
        {
            alert(
"请输入验证码!");
        }
       
else if(inputCode != code )
        {
           alert(
"验证码输入错误!");
           createCode();
//刷新验证码
        }
       
else
        {
          alert(
"^-^ OK");
        }
       
        }
       
    
</script>
</head>
<body>
<form  action="#">
    
&nbsp;<input  type="text"   onclick="createCode()" id="input1" />
    
    
<input type="text"   id="checkCode" class="unchanged" style="width: 80px"  /><br />
    
<input id="Button1"   onclick="validate();" type="button" value="确定" />&nbsp;
</form>
</body>
</html>
 

相关文章:asp生成验证码代码

                    asp生成验证码代码

本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:各种语言的验证码代码[js]

一条评论

  1. 李馨惜 2013 年 4 月 20 日 下午 9:53 回复

    谢谢你的代码,写的很清楚详细。
    并且,我想更深入的问一个问题好吗?
    因为在验证码前还有用户名及密码的验证,因此,验证码按上述代码稍作改写后,总是在提示验证码错误或未写时,没有重新回到原页面,而是出现了跳转到其他页面,那么我该怎么改进呢?
    请有时间的时候,尽快帮我解答,好吗?
    谢谢

    cyheng 于 2013-04-22 22:58:23 回复

    您好,没有回到原页面,大概是由于alert过后,会自动触发form表单提交验证,由action属性控制的,你可以设为空,试下!
    还有问题,请留言,或加博主扣扣–见首页左下方!

    由 cyheng 于 2013-04-22 23:04:00 最后编辑

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部