$("#rupwd").focus(function(){ var noticeMsg = '再次输入你设置的密码'; notice($("#rupwdchk"),noticeMsg); }) .click(function(){ var noticeMsg = '再次输入你设置的密码'; notice($("#rupwdchk"),noticeMsg); }).keydown(function(){ //把焦点移至邮箱栏目 if(event.keyCode == 13){ $("#yzm").focus(); } }) .blur(function(){ if(this.value == $("#upwd").val() && this.value!=""){ success($("#rupwdchk"),""); rpwdval = true; }else if(this.value == ""){ $("#rupwdchk").html(""); }else{ var errorMsg = '两次输入的密码不一致'; error($("#rupwdchk"),errorMsg); } });
提示文字：
①获得焦点、点击时
②失去焦点时和密码不一致、一致时分别为
至此重复密码结束。
验证码：不区分大小写
验证码采用4位，可以包含的字符为数字1-9，字母a-f
点击验证码和刷新按钮都能刷新验证码
register.html验证码代码部分：
<div> <input type='text' placeholder="验证码"> <img src=''> <!-- 验证码图片 --> <a> <img src="https://www.jb51.net/images/ref.jpg" alt="验证码"> <!-- 验证码刷新按钮图片 --> </a> <span></span> <input type='hidden' value=''> <!-- 隐藏域，内容是验证码输出的数字，用户输入的字符与其进行对比 --> </div>
register.js验证码部分:
//验证码按钮 $("#refpic").hover(function(){ $(this).attr("src","images/refhover.jpg"); },function(){ $(this).attr("src","https://www.jb51.net/images/ref.jpg"); }).mousedown(function(){ $(this).attr("src","images/refclick.jpg"); }).mouseup(function(){ $(this).attr("src","https://www.jb51.net/images/ref.jpg"); }); //生成验证码函数 function showval() { num = ''; for (i = 0; i < 4; i++) { tmp = Math.ceil(Math.random() * 15);//Math.ceil上取整；Math.random取0-1之间的随机数 if (tmp > 9) { switch (tmp) { case(10): num += 'a'; break; case(11): num += 'b'; break; case(12): num += 'c'; break; case(13): num += 'd'; break; case(14): num += 'e'; break; case(15): num += 'f'; break; } } else { num += tmp; } $('#yzmpic').attr("src","../valcode.php?num="+num); } $('#yzmHiddenNum').val(num); } //生成验证码以及刷新验证码 showval(); $('#yzmpic').click(function(){ showval(); }); $('#changea').click(function(){ showval(); }); //验证码检验 function yzmchk(){ if($("#yzm").val() == ""){ var errorMsg = '验证码不能为空'; error($("#yzmchk"),errorMsg); }else if($("#yzm").val().toLowerCase()!=$("#yzmHiddenNum").val()){ //不区分大小写 var errorMsg = '请输入正确的验证码'; error($("#yzmchk"),errorMsg); }else{ success($("#yzmchk"),""); yzmval = true; } } //验证码的blur事件 $("#yzm").focus(function(){ var noticeMsg = '不区分大小写'; notice($("#yzmchk"),noticeMsg); }).click(function(){ var noticeMsg = '不区分大小写'; notice($("yzmdchk"),noticeMsg); }).keydown(function(){ //提交 if(event.keyCode == 13){ //先检验后提交 yzmchk(); formsub(); } }).blur(function(){ yzmchk(); });
valcode.php验证码生成php代码：
<?php header("content-type:image/png"); $num = $_GET['num']; $imagewidth = 150; $imageheight = 54; //创建图像 $numimage = imagecreate($imagewidth, $imageheight); //为图像分配颜色 imagecolorallocate($numimage, 240,240,240); //字体大小 $font_size = 33; //字体名称 $fontname = 'arial.ttf'; //循环生成图片文字 for($i = 0;$i<strlen($num);$i++){ //获取文字左上角x坐标 $x = mt_rand(20,20) + $imagewidth*$i/5; //获取文字左上角y坐标 $y = mt_rand(40, $imageheight); //为文字分配颜色 $color = imagecolorallocate($numimage, mt_rand(0,150), mt_rand(0,150), mt_rand(0,150)); //写入文字 imagettftext($numimage,$font_size,0,$x,$y,$color,$fontname,$num[$i]); } //生成干扰码 for($i = 0;$i<2200;$i++){ $randcolor = imagecolorallocate($numimage, rand(200,255), rand(200,255), rand(200,255)); imagesetpixel($numimage, rand()%180, rand()%90, $randcolor); } //输出图片 imagepng($numimage); imagedestroy($numimage); ?>
注：把字体"Arial"放在服务器的相应目录
提示文字：
①获得焦点时、点击时
②为空且失去焦点时
③输入错误、输入正确且失去焦点时分别为
验证码至此结束。
使用协议：默认勾选；
register.html相应代码：