javascript实现数字验证码的简单实例
2014-02-10 00:00
671 查看
实例如下:
<!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>
相关文章推荐
- javascript实现数字+字母验证码的简单实例
- javascript实现数字验证码的简单实例
- javascript实现数字+字母验证码的简单实例
- 原生js实现数字字母混合验证码的简单实例
- 原生js实现数字字母混合验证码的简单实例
- javascript特效实现――当前时间和倒计时效果的简单实例
- Codewars简单使用和 其中一道题,用JavaScript实现一个函数,求一个正数的次大数字,拿自己的解法和大神相比,简直对不起JavaScript给我提供的 那么多便利
- jquery实现无刷新验证码的简单实例
- javascript 实现子父窗体互相传值的简单实例
- .NET下实现数字和字符相混合的验证码实例
- javascript实现的闭包简单实例
- javascript 实现(数字+字母)验证码
- 纯javascript的ajax实现php异步提交表单的简单实例
- JavaScript实现页面实时显示当前时间的简单实例
- JavaScript操作CSS样式实现简单的验证码的功能
- JavaScript实现简单的数字倒计时
- 使用JavaScript实现弹出层效果的简单实例
- 使用Javascript实现一种简单的数字混淆功能(高手绕过)
- PHP+AJAX实现简单验证码程序实例
- 两种思路用javascript实现实现简单的数字滚动动画