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,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','wW','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;  
       }

}

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)

相关推荐

  • js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

    前段时间写了一个 js数据验证.js email验证.js url验证.js长度验证.js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了. js代码 复制代码 代码如下: /** * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. * * @author wangzi6hao * @version 2.1 * @desc

  • javascript验证只能输入数字和一个小数点示例

    复制代码 代码如下: function gaga(obj){ // 值允许输入一个小数点和数字 obj.value = obj.value.replace(/[^\d.]/g,""); //先把非数字的都替换掉,除了数字和. obj.value = obj.value.replace(/^\./g,""); //必须保证第一个为数字而不是. obj.value = obj.value.replace(/\.{2,}/g,"."); //保证只有出

  • 解析使用js判断只能输入数字、字母等验证的方法(总结)

    JS判断只能是数字和小数点0.不能输入中文1)<input onpaste="return false;" type="text" name="textfield" style="width:400px; ime-mode:disabled" value="">2)<script>function chkIt(frm){if (frm.n1.value.length>0&

  • JavaScript使用键盘输入控制实现数字验证功能

    JavaScript使用键盘输入控制实现数字验证功能

    现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单,代码如下: va

  • JS验证逗号隔开可以是中文字母数字

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> var refid='dasdasd,dadsad'; var reg =/^([\u0391-\uFFE5\d\w,])*([\u0391-\uFFE5\d\w]+)$/; if(refid != "") { if(reg.exec(refid)) { alert('验证通过'); }else { alert('验证失败'); } }

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

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

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

  • 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=

  • 用jsp页面生成随机的验证数字码示例

    checkNum.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%> <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,javax.imageio.*"%>

  • JS正则表达式验证数字代码

    复制代码 代码如下: <script type="text/javascript">     function validate(){       var reg = new RegExp("^[0-9]*$");       var obj = document.getElementById("name");    if(!reg.test(obj.value)){        alert("请输入数字!");

  • 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=

  • jquery实现无刷新验证码的简单实例

    1. 思路: 页面上的验证码图片是servlet,采用jquery实现异步校验信息 2. 所用到的文件 VerifyCodeServlet.java   --用于生成图片的servlet ResultServlet.java          --用于校验验证码正确性的servlet verifyCode.js                  --校验的js文件 jquery.js                         --jquery包里的源文件 verifyCode.jsp   

  • js实现随机数字字母验证码

    js实现随机数字字母验证码

    本文实例为大家分享了数字字母验证码的具体实现代码,供大家参考,具体内容如下 验证码: <html> <head> <title>纯字验证码</title> <meta http-equiv='content-type' content='text/html;charset=utf-8'/> <script type='text/javascript' src='jquery-1.7.2.js'></script> <

  • PHP生成制作验证码的简单实例

    PHP生成制作验证码的简单实例

    看完就会,不会你打我,话不多说.开搞(人狠话不多) 1.0 首先先看代码 <?php header("Content-Type:text/html;Charset=UTF-8");// 设置页面的编码风格 header("Content-Type:image/jpeg");// 通知浏览器输出的是jpeg格式的图像 $img = imagecreatetruecolor(150,50);//创建画布并设置大小 x轴150 y轴50 $bgcolor = ima

  • Java 实现随机验证码功能简单实例

    Java 实现随机验证码功能简单实例 现在许多系统的注册.登录或者发布信息模块都添加的随机码功能,就是为了避免自动注册程序或者自动发布程序的使用. 验证码实际上就是随机选择一些字符以图片的形式展现在页面上,如果进行提交操作的同时需要将图片上的字符同时提交,如果提交的字符与服务器session保存的不同,则认为提交信息无效.为了避免自动程序分析解析图片,通常会在图片上随机生成一些干扰线或者将字符进行扭曲,增加自动识别的难度. 在这里,我们使用servlet来实现随机验证码的实现.  实现代码: p

  • javascript汉字拼音互转的简单实例

    如下所示: var PinYin = { charDict : "YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJGYZZJJFKCCLZDHWDWZJLJPFYYNWJJTMYHZWZHFLZPPQHGSCYYYNJQYXXGJHHSDSJNKKTMOMLCRXYPSNQSECCQZGGLLYJLMYZZSECYKYYHQWJSSGGYXYZYJWWKDJHYCHMYXJTLXJYQBYXZLDWRDJRWYSRLDZJPCBZJJBRCFTLECZSTZF

  • Javascript农历与公历相互转换的简单实例

    如下所示: /**用法 * Lunar.toSolar(2016, 6, 3); 农历转化公历 * Lunar.toLunar(2016, 7, 6); 公历转化农历 */ var Lunar = { MIN_YEAR : 1891, MAX_YEAR : 2100, lunarInfo : [ [0,2,9, 21936], [6,1,30, 9656], [0,2,17, 9584], [0,2,6, 21168], [5,1,26,43344], [0,2,13,59728], [0,2,

  • Javascript实现跑马灯效果的简单实例

    页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel

  • JavaScript实现九九乘法表的简单实例

    每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript九

  • JS 数字转换为大写金额的简单实例

    JS 数字转换为大写金额的简单实例 function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return "数据非法"; var unit = "千百拾亿千百拾万千百拾元角分", str = ""; n += "00"; var p = n.indexOf('.'); if (p >= 0) n = n.substring(0, p) + n.substr(p+1,

随机推荐