注册页面加验证码

原文地址：http://hi.baidu.com/rebirth_py/blog/item/7068531d75ea260cb8127b37.html  <html> <head> <title>registration</title> <link href="mywork.css" rel="stylesheet" type="text/css"> <script> var Checking = {}; Checking = { $ : function(id) { return document.getElementById(id); }, color : ['#FF0000', '#00FF66', '#FFFF00', '#FFCC00', '#6600FF', '#0000FF','#99FFFF', '#66CCFF'], cacheValue : null,// 缓存画布上的值,比对时用 draw : function() { var div = this.$('ieContainer'), sty = div.style; div.onselectstart = new Function("return false");// 禁止选中 div.oncopy = new Function("return false");// 禁止复制 sty.height = "30px"; sty.width = "125px"; var bgColor = this.getRandomColor();// div背景色 sty.backgroundColor = bgColor; sty.font = "26pt Kristen ITC"; //Calibri var fontColor = this.getRandomColor();// 文字颜色 sty.color = bgColor == fontColor ? this.getRandomColor() : fontColor;// 保证文字色基本不会跟背景色一样 sty.textAlign = "center"; // 设置div颜色渐变效果 sty.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr= " + bgColor + ", EndColorStr= " + this.getRandomColor() + ")"; var newText = this.getRandomDigit_Letters(5); this['cacheValue'] = newText;// 临时存贮生成的验证码，校验时使用 div.innerHTML = newText; }, //画背景 //createLinearGradient() 方法创建一条线性颜色渐变。返回一个线性颜色渐变的一个 CanvasGradient对象。 drawBgColor : function(context) { var grd = context.createLinearGradient(100, 100, 70, 18); var startColor = this.getRandomColor(); var endColor = this.getRandomColor(); grd.addColorStop(0, startColor); grd.addColorStop(1, startColor == endColor ? this.getRandomColor() : endColor); context.fillStyle = grd; context.fillRect(100,100, 800, 600); }, //画文字 drawText : function(context) { var x = 60; var y = 30; context.font = "30pt Kristen ITC"; context.textAlign = "center"; context.fillStyle = this.getRandomColor(); var newText = this.getRandomDigit_Letters(5); this['cacheValue'] = newText; context.fillText(newText, x, y); }, //获得随机颜色 getRandomColor : function() { var len = this.color.length, random = this.getBigRandom(len); return this['color'][random]; }, //根据scale以内的随机整数 getBigRandom : function(scale) { return Math.floor(Math.random() * (scale || 10)); }, //获得画布上的字符串,字母与数字的随机组合 getRandomDigit_Letters : function(length) { var result = []; var arr = this.getLetters().concat(this.getDigit()); for (var i = 0; i < length; i++) { result.push(arr[this.getBigRandom(35)]); } return result.join(""); }, //获得0～9的数组 getDigit : function() { var arr = []; for (var i = 0; i < 10; i++) { arr.push(i); } return arr; }, //获得a～z的字母数组 getLetters : function() { var arr = []; var start = "a".charCodeAt(); var end = "z".charCodeAt(); for (var i = start; i <= end; i++) { if (i % 2 == 0) { arr.push(String.fromCharCode(i)); } else { arr.push(String.fromCharCode(i).toUpperCase()); } } return arr; }, // 判断 check : function() { var chkValue = this['cacheValue'].toUpperCase(); var inputValue = this.$('chk').value.toUpperCase(); if (chkValue !== inputValue) { alert("验证码输入错误！"); return false; } else return true; } } function Judge_email() { var Str=document.getElementById("email").value; if (Str=="") { alert("请输入\"E-mail\"!") ; document.getElementById("email").focus(); return (false); } var checkOK="ABCDEFGHIJKLMNOPGRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 - _@ ."; var allValid=true; for(i=0;i<Str.length;i++) { ch=Str.charAt(i); for(j=0;j<checkOK.length;j++) if(ch==checkOK.charAt(j)) break; if(j==checkOK.length) { allValid=false; break; } } if(Str.length<6) { allValid=false; } if(!allValid) { alert("您输入的\"电子邮箱地址\"无效") document.getElementById("email").value=""; document.getElementById("form_password1").value=""; document.getElementById("form_password2").value=""; document.getElementById("email").focus(); return(false); } address=document.getElementById("email").value if(address.length>0) { i=address.indexOf("@"); if(i==-1) { document.getElementById("email").focus(); document.getElementById("email").value=""; document.getElementById("form_password1").value=""; document.getElementById("form_password2").value=""; return false; } p=address.indexOf("."); if(p==-1) { window.alert("您输入的\"电子邮箱地址\"无效"); document.getElementById("email").value=""; document.getElementById("form_password1").value=""; document.getElementById("form_password2").value=""; return false; } } } function Judge_password1() { var p1=document.getElementById("form_password1").value if(p1=="") { if(document.getElementById("email").value!="") { alert("密码不能为空!") document.getElementById("form_password1").focus(); } else document.getElementById("email").focus(); return false; } } function Judge_password2() { var p1=document.getElementById("form_password1").value var p2=document.getElementById("form_password2").value if(document.getElementById("email").value!="") { if(p2=="") { if(document.getElementById("form_password1").value!="") { alert("请输入确认密码") document.getElementById("form_password2").focus(); } else document.getElementById("form_password1").focus(); return false; } if(p1!=p2) { alert("两次输入的密码不相同!") document.getElementById("form_password2").focus(); document.getElementById("form_password1").value=""; document.getElementById("form_password2").value=""; document.getElementById("email").focus(); return false; } } else document.getElementById("email").focus(); } function Juge(theForm) { var a=Checking.check(); if(a) return true; else { Checking.draw(); return false; } } </script> </head> <body background = "1.jpg" > </body> <body onLoad="Checking.draw()"> <h4 class="smallone1"> <div class="s1"> <div class="s0"> 用户注册 <hr> <form method="post" onSubmit="return Juge(PostTopic)" name="PostTopic" id="PostTopic" action = "mywork.html" > <br>输入邮箱: <input type="text" name="email" id="email" maxlength="30" size="25" style="border:1px double rgb( 88,88,88);font: 9pt" onBlur=" Judge_email()"></br> <br>输入密码: <input type="password" name="form_password1"id="form_password1" maxlength="30" size="25" style="border:1px double rgb(88,88,88);font: 9pt"onBlur=" Judge_password1(PostTopic)"></br> <br>密码确认: <input type="password" name="form_password2"id="form_password2" maxlength="30" size="25" style="border:1px double rgb(88,88,88);font: 9pt"onBlur=" Judge_password2()"></br> <br>性别: <input type="radio" name="sex" value ="male" checked> 男 <input type="radio" name="sex" value ="female" > 女 <br> <br> 验证码: <div id="ieContainer" onDblClick="Checking.init()"> </div> <h6><br/> <input type='text' id="chk"> <br> </br> <input type="submit" value="提交" name="submit"> </h6> </form> </div> </h4> </div> </body> </html>  <html> <head><title>注册成功</title></head> <body> <br> <h1 align="center" >注册成功！</h1> <style type="text/css"> body{background :url(2.jpg) center;} </body> </html>  .s0 { line-spacing: 100pt; } .s1 { border-width: 2px; border-style: solid; border-color: green; width:400px; padding-top:0.5cm; padding-bottom: 1cm; padding-left: 1cm; padding-right: 1cm; margin: 3cm; float:right; } .smallone1 {font-family:"微软雅黑";size:100px;color:deepbrown ;text-align:left}

秒客网

注册页面加验证码

相关文章