`
zjx2388
  • 浏览: 1329059 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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=UTF-8" />
    <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 = 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','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;
       }
     }
     function validate ()
     {
       var inputCode = document.getElementById("input1").value;
       if(inputCode.length <=0)
       {
           alert("请输入验证码!");
       }
       else if(inputCode != code )//区分大小写
	   //else if(inputCode.toLowerCase() != code.toLowerCase() )//不区分大小写的处理
       {
          alert("验证码输入错误!");
          createCode();//刷新验证码
       }
       else
       {
         alert("^-^ OK");
       }
      }
</script>
</head>
<body>
<form action="#">
     <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="确定" /> 
</form>
</body>
</html>

 
分享到:
评论

相关推荐

    简易登录源码(包含用户名,密码,验证码)

    对于学习者来说,理解并动手实践这个例子,将有助于深化对Web应用开发的理解,特别是JavaScript(JS,对应标签)在前端交互中的作用,以及Java Servlet在后端处理中的功能。通过这个项目,你可以学习到如何实现一个...

    (设计用)线构4位验证码

    **设计用线构4位验证码**通常是指在进行UI/UX设计时,为了模拟真实环境中的用户验证流程而创建的一种简易的验证码实现方式。这种验证码主要用于前端设计阶段,以便设计师能够快速构建出具有交互性的原型页面,从而更...

    js+html+css实现简易商城项目

    - **验证码**:JavaScript可以生成随机验证码图像,并在用户输入后进行比对验证,增加安全性。 - **事件监听**:通过`addEventListener`监听用户的点击、提交等行为,触发相应的处理函数。 - **AJAX异步请求**:...

    网上 简易 论坛 源代码

    7. **安全性**:源代码应包含防止SQL注入、XSS攻击的安全措施,以及对敏感数据的加密处理,如使用HTTPS协议、验证码系统等。 8. **API设计**:如果论坛支持移动应用或其他第三方系统的集成,可能包含RESTful API...

    简易学习社交平台

    用户管理采用ORM框架对数据库进行操作,用户登录时需要验证时的验证码采用AJAX对后台进行请求,动态验证验证码的正确性,用户可以实时刷新验证码。 用户请求主页时对后台请求,后台返回JSON数据供浏览器解析并向用户...

    bootstrap简易登录注册页面

    8. **自定义与扩展**:虽然这个资源包提供了一个基础的登录注册页面,但开发者可以根据需要对其进行自定义和扩展,例如添加验证码功能、集成第三方身份验证服务(如OAuth)、优化表单提交的处理逻辑等。 总之,这个...

    简易留言板---- 一个功能简单的留言板。

    在技术实现上,“简易留言板”可能采用了Web开发框架,如Django、Flask(Python)或者Express(JavaScript),它们提供了构建Web应用的便捷工具和结构。前端部分可能使用HTML、CSS和JavaScript,利用AJAX技术实现无...

    简易投票系统VS2005

    这可能涉及到身份验证(如登录系统)、授权(限制某些操作)以及可能的IP跟踪和验证码机制。 6. **状态管理**:在Web应用中,由于其无状态性,需要特别处理用户状态。VS2005提供了多种状态管理机制,如Session、...

    简易论坛系统

    10. **安全性**:论坛系统需要保护用户数据的安全,防止未授权访问和恶意攻击,这通常通过加密技术、验证码和防火墙等手段来实现。 开发这样一个简易论坛系统,通常会使用Web开发框架,比如Python的Django或Flask,...

    java web实现的简易bbs论坛

    HTML、CSS和JavaScript用于构建用户界面和实现交互效果。可以使用前端框架如Bootstrap或Vue.js来提升开发效率和用户体验。Ajax技术用于实现无刷新的异步通信,如发送新帖、回复等操作,提高交互性。 最后,**服务器...

    zclip点击复制插件简易版

    总结来说,"zclip点击复制插件简易版"是基于Flash的JavaScript复制插件,适用于快速实现简单的文本复制功能,特别适合那些对兼容性有较高要求的项目。通过理解和应用zclip,开发者可以提升网站或应用的用户体验,...

    简易的购物车系统基于SH

    通过学习这个简易购物车系统,开发者可以掌握Web应用的基本架构,理解MVC模式,以及如何利用Spring和Hibernate来实现业务逻辑,同时还能了解到AJAX、验证码、分页排序等实际开发中的常见技术,对于提升Web开发技能...

    纯JS打造的滑块拼图验证

    滑块拼图验证是一种常见的网页安全机制,常用于防止自动化的机器人或脚本进行非法操作,如注册、登录等过程中的验证码。这种验证方式通过让用户移动一个滑块来完成拼图,以证明他们是人类而非机器。本文将详细介绍...

    简易留言簿

    - 验证码:防止恶意机器人自动留言,可能会添加验证码功能。 - 输入验证:前端和后端都需要对用户输入进行验证,确保数据格式正确,防止SQL注入等安全问题。 7. **响应式设计** - 留言簿可能采用响应式设计,使...

    php用户管理系统(简易).zip

    系统的前端界面通常由HTML、CSS和JavaScript组成,用于接收用户输入、显示信息和实现动态效果。在PHP用户管理系统中,前端将通过AJAX与后端PHP脚本通信,实现无刷新的用户体验。 【安全性考量】 在任何用户管理...

    简易的登录模板

    在实际应用中,开发者应根据项目需求对模板进行定制,比如添加验证码功能来防止机器人攻击,或者集成第三方登录服务(如Google、Facebook等)。此外,考虑到用户隐私和数据保护,开发者还需确保符合相关的法律法规,...

    JSP简易登陆注册源代码

    1. **JSP基本结构**:JSP文件通常包含静态内容(HTML、CSS、JavaScript)和动态内容(Java代码)。动态内容以`&lt;% %&gt;`或`指令&gt;`标签的形式存在,用于处理业务逻辑和数据操作。 2. **JSP生命周期**:JSP页面会经过...

    简易php图形计数器 1.1.zip

    因此,应考虑加入防止刷票的机制,如限制IP地址的访问频率或使用验证码。 8. **响应式设计**:为了适应不同设备和屏幕尺寸,计数器的样式应该具备响应式,确保在手机和平板等移动设备上也能良好显示。 9. **代码...

    简易秒杀_毕业设计.zip

    4. 防刷机制:设置验证码、IP限制、用户行为分析等策略,防止恶意刷单。 5. 订单处理:生成订单,记录用户的购买信息,与支付系统集成完成支付流程。 6. 异步处理:利用队列服务,将部分耗时操作(如发送邮件通知...

    ASP.NET 制作简易留言板

    最后,为了提高用户体验,我们可以添加一些额外的功能,比如验证码防止恶意留言,分页显示大量留言,搜索功能等。还可以通过CSS和JavaScript来美化界面和增强交互性。 总之,“ASP.NET 制作简易留言板”项目涵盖了...

Global site tag (gtag.js) - Google Analytics