javascript实现数字验证码的简单实例

实例如下：


代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS验证码</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 = 4;//验证码的长度  
       var checkCode = document.getElementById("checkCode");  
       var selectChar = new Array(0,1,2,3,4,5,6,7,8,9);//所有候选组成验证码的字符，当然也可以用中文的

for(var i=0;i<codeLength;i++)  
       {

var charIndex = Math.floor(Math.random()*10);  
       code +=selectChar[charIndex];

}  
//       alert(code);  
       if(checkCode)  
       {  
         checkCode.className="code";  
         checkCode.value = code;  
       }

}

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 onload="createCode()"> 
<form  action="#"> 
     <input  type="text"   id="input1" /> 
    <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br /> 
    <input id="Button1"  onclick="validate();" type="button" value="确定" />   
</form> 
</body> 
</html>

赞 (0)

相关推荐

  • c#实现识别图片上的验证码数字

    c#实现识别图片上的验证码数字

    public void imgdo(Bitmap img) { //去色 Bitmap btp = img; Color c = new Color(); int rr, gg, bb; for (int i = 0; i < btp.Width; i++) { for (int j = 0; j < btp.Height; j++) { //取图片当前的像素点 c = btp.GetPixel(i, j); rr = c.R; gg = c.G; bb = c.B; //改变颜色 if (r

  • php生成4位数字验证码的实现代码

    在php中实现验证码还是很方便的,关键点在于掌握php gd库与session的用法. 纵观网上php 生成验证码的例子,无不是php gd库与session相结合,并利用php 生成随机数的方法来完成. PHP验证码,可以分为很多种,包括 php 图片验证码,php 随机验证码,以及php 中文验证码等,根据不同的应用场合来使用不同的验证码. 这里分享一个php数字验证码,供大家参考. 4位数字验证码 /* *Filename:authpage.php */ session_start();

  • asp.net下生成英文字符数字验证码的代码

    复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; usi

  • asp.net生成验证码（纯数字）

    CheckCode.cs 复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.Html

  • 写一个含数字,拼音,汉字的验证码生成类

    写一个含数字,拼音,汉字的验证码生成类

    本次和大家分享的是一个集成1:小写拼音 2:大写拼音 3:数字 4:汉字的验证码生成类,从标题来看感觉很普通的样子,没错的确很普通,只是这个验证码类生成的时候可以通过参数指定验证码返回格式的规则,更主要的是希望能给大家带来一定的实用性,本章例子也会有一个mvc使用验证码校验的场景,希望大家能够喜欢. » 验证码生成流程图 » 验证码生成池代码的解析 » 把验证代码画到图片上 » mvc登录操作测试验证码正确性 下面一步一个脚印的来分享: » 验证码生成流程图 首先,咋们来看一下本次分享的验证码生

  • 原生js实现数字字母混合验证码的简单实例

    原生js实现数字字母混合验证码的简单实例

    本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin:

  • 支持中文字母数字、自定义字体php验证码代码

    复制代码 代码如下: <?php /* * Captcha Class base on PHP GD Lib * @author Design * @version 1.0 * @demo * include('captchaClass.php'); * $captchaDemo=new Captcha(); * $captchaDemo->createImage(); */ class Captcha{ //@定义验证码图片高度 private $height; //@定义验证码图片宽度 p

  • jquery禁止输入数字以外的字符的示例(纯数字验证码)

    纯数字验证码的时候用到的,整理如下: 复制代码 代码如下: $('#mobile-vcode').unbind();$("#mobile-vcode").bind("keyup change",function () {    $(this).val($(this).val().replace(/\D/g,''));    if($(this).val().length==4){        /*ajax检测验证码是否正确,正确则激活按钮*/    }});

  • 个人写的PHP验证码生成类分享

    此验证码类直接拿去就可以用,也可以参考! 其中类成员codestr是生成的验证码字符串: <?php /** * 验证码 */ class Code{ // 1. 定义各个成员 有宽.高.画布.字数.类型.画类型 private $width; //宽度 private $height; //高度 private $num; //验证码字数 private $imgType; //生成图片类型 private $Type; //字串类型 1,2,3 三个选项 1 纯数字 2 纯小写字母 3 大小

  • php中文字母数字验证码实现代码

    英文同数字 <?php Header("Content-type:image/png"); //定义header,声明图片文件,最好是png,无版权之扰;  //生成新的四位整数验证码 session_start();//开启session; $authnum_session = '';  $str = 'abcdefghijkmnpqrstuvwxyz1234567890';  //定义用来显示在图片上的数字和字母; $l = strlen($str); //得到字串的长度; 

随机推荐