简单的前端验证码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>验证码Demo</title>
 5     <meta charset="UTF-8">
 6     <style type="text/css">
 7         .code {font-family:Arial;font-style:italic;color:Red;border:0;padding:2px 3px;letter-spacing:3px;font-weight:bolder;}
 8         .unchanged{border:0;}
 9     </style>
10     <script type="text/javascript">
11         var code;//在全局 定义验证码
12         function createCode(){
13             code = "";
14             var codeLength = 6;//验证码的长度
15             var checkCode = document.getElementById("checkCode");
16             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‘);//所有候选组成验证码的字符,当然也可以用中文的
17             for(var i=0;i < codeLength;i++){
18                 var charIndex = Math.floor(Math.random()*36);
19                 code +=selectChar[charIndex];
20             }
21             //alert(code);
22             if(checkCode){
23                 checkCode.className="code";
24                 checkCode.value = code;
25             }
26         }
27         function validate(){
28             var inputCode = document.getElementById("input1").value;
29             if(inputCode.length <= 0){
30                 alert("请输入验证码!");
31             }else if(inputCode != code){
32                 alert("验证码输入错误!");
33                 createCode();//刷新验证码
34             }else{
35                 alert("^-^ OK");
36             }
37         }
38     </script>
39 </head>
40 <body >
41 <form  action="#">
42     <input type="text" id="input1" />
43     <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width:80px"/><br/>
44     <input id="Button1" onclick="validate();" type="button" value="确定" />
45 </form>
46 </body>
47 </html>
时间: 2024-10-11 04:27:45

简单的前端验证码的相关文章

JavaScript实现简单的前端上传图片预览

JavaScript实现简单的前端上传图片预览 <div class="file_upload"> <div id="portrait"></div> <input type="file" name="" id="" onchange="showPerview(this)"> </div> <script type=&qu

jQuery结合Ajax实现简单的前端验证和服务端查询

上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 1 <form name="form2"> 2 <label class="style1">请输入要查询的内容:</label> 3 <br /> 4 <br /> 5 <input name="neirong&quo

前端验证码的实现,vue+webpack

前端就是用的现在流行的vue+webpack. 实现还是蛮简单的直接贴代码吧! (1)页面: (2)载入页面时先获取一个验证码图片,验证码点击是也会重新获取一张新的图片 (3) 所有的接口都写在api.js中,在图片地址后加上时间可以重新出发请求 // 引入api.js // 接口在api.js中的写法 // 函数

简单理解前端web开发的MVC模式

随着前端Ajax兴起.前端开发工作进一步划分:js开发和ui页面制作.另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目. 例如 需要给一个页面上的button注册一个onclick事件. 1.我们可以有如下最简洁的写法:(view和model control完全混合) <HTML> <HEAD> <TITLE> example </TITLE> </HEAD> <BODY> <input

一个简单编译器前端的实现

小记: 其实这个程序是编译原理这门课的综合实验,前段时间我申请免试又失败了,原因是有缺课,平时分不够,早上赖床现在尝到苦果我也是醉了……没办法,逼上梁山,只好攻克这个大boss以拿下免试资格. 选了一个最简单的文法,分析了1个多星期,终于决定开始要写的时候时间已经很紧了. 去实验室通宵了一晚,在宿舍熬了一晚,睡了3个小时就起来去验收了.还好是通过了,没白费劲. 不得不说,编译原理就是烧脑,知识点都比较抽象,如果数据结构和算法的基础打得不牢的话,实现起来会感到吃力. 再次感觉到了基础的重要性,这也

编写一个简单的随机验证码程序

简单模拟网页的随机数字验证码,效果图如下: html代码: 1 <div id="content"> 2 <div class="left"> 3 <input type="text" class="txt" id="in"> 4 </div> 5 <div class="right"> 6 <span id="

简单的PHP验证码生成

在网站的登陆和注册的时候,经常会用到验证码来防止别人用机械暴力注册或登陆,加上验证码这样一定程度上让网站安全很多,下面是一个比较简单的验证码生成,同时给session赋值. <?php session_start(); header(“Content-type: image/png”); //创建真彩色白纸 $im = @imagecreatetruecolor(50, 20) or die(“建立图像失败”); //获取背景颜色 $background_color = imagecoloral

比较简单的JavaWeb验证码

1.首先是基本属性类CaptchaConstant.java package com.baofoo.web.captcha; import java.awt.Color; import java.awt.Font; public class CaptchaConstant { /**  * 默认字体名  */ public static final String DEFAULT_FONT_NAME = "Courier"; /**  * 默认字体大小  */ public static

用Java制作一个简单的图片验证码

//Java实现简单验证码功能 package project; import java.awt.Color; import java.awt.Font;import java.awt.Graphics;import java.awt.Image;import java.awt.event.MouseEvent;import java.awt.event.MouseListener;import java.awt.image.BufferedImage; import javax.swing.I