使用jQuery如何写一个含验证码的登录界面


Posted in jQuery onMay 13, 2019

一个包含用户名,密码,验证码的简单的登陆界面,如下图所示:

使用jQuery如何写一个含验证码的登录界面

首先是 HTML 代码:

<div id="divID">
 <div style="background-color:transparent;">
  <form id="ff" method="post">
   <ul class="reg-box">
    <li>
     <label for="">账 号</label>
     <input type="text" name="accName" value="" class="account" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/>
     <span class="error error5"></span>
    </li>
    <li>
     <label for="">密 码</label>
     <input type="password" name="accPassWord" class="admin_pwd" value="" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/>
     <span class="error error6"></span>
    </li>
    <li>
     <label for="">验证码</label>
     <input type="text" class="sradd photokey" id="key" value="" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" onBlur="textBlur(this)" onFocus=" textFocus(this) " />
     <span class="add phoKey"></span>
     <span class="error error7"></span>
    </li>
   </ul>
   <div class="sub">
    <input type="submit" value="立即登录"/>
   </div>
  </form>
 </div>
</div>

然后是实现验证用户的输入是否正确的 JS 代码:

//文本框默认提示文字
function textFocus(el) {
 if (el.defaultValue == el.value) { el.value = ''; el.style.color = '#333'; }
}
function textBlur(el) {
 if (el.value == '') { el.value = el.defaultValue; el.style.color = '#999'; }
}

$(function(){
 /*生成验证码*/
 create_code();

 //登录页面的提示文字
 //账户输入框失去焦点
 (function login_validate(){
  $(".reg-box .account").blur(function(){
   //reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)

   if( $(this).val()==""|| $(this).val()=="请输入您的账号")
   {
    $(this).addClass("errorC");
    $(this).next().html("账号不能为空!");
    $(this).next().css("display","block");
    $(".sub input").prop('disabled', true);
   }
//    else if($(".reg-box .account").val().length<11)
//    {
//     $(this).addClass("errorC");
//     $(this).next().html("账号长度有误!");
//     $(this).next().css("display","block");
//    }
//    else if(!reg.test($(".reg-box .account").val()))
//    {
//     $(this).addClass("errorC");
//     $(this).next().html("账号不存在!");
//     $(this).next().css("display","block");
//    }
   else
   {
    $(".sub input").prop('disabled', false);
    $(this).addClass("checkedN");
    $(this).removeClass("errorC");
    $(this).next().empty();
   }
  });
  /*密码输入框失去焦点*/
  $(".reg-box .admin_pwd").blur(function(){
   //reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;

   if($(this).val() == ""){
    $(this).addClass("errorC");
    $(this).next().html("密码不能为空!");
    $(this).next().css("display","block");
    $(".sub input").prop('disabled', true);
   }
//    else if(!reg.test($(".admin_pwd").val())) {
//     $(this).addClass("errorC");
//     $(this).next().html("密码为6~12位的数字、字母或特殊字符!");
//     $(this).next().css("display","block");
//    }
   else {
    $(".sub input").prop('disabled', false);
    $(this).addClass("checkedN");
    $(this).removeClass("errorC");
    $(this).next().empty();
   }
  });

  /*验证码输入框失去焦点*/
  $(".reg-box .photokey").blur(function(){
   var code1=$('.reg-box input.photokey').val().toLowerCase();
   var code2=$(".reg-box .phoKey").text().toLowerCase();
   if(code1!=code2)
   {
    $(this).addClass("errorC");
    $(this).next().next().html("验证码输入错误!!!");
    $(this).next().next().css("display","block");
    $(".sub input").prop('disabled', true);
   }
   else
   {
    $(".sub input").prop('disabled', false);
    $(this).removeClass("errorC");
    $(this).next().next().empty();
    $(this).addClass("checkedN");
   }
  })
 })();
});

函数 create_code() 用于生成验证码:

function create_code() {
 function shuffle() {
  var arr = ['1', 'r', 'Q', '4', 'S', '6', 'w', 'u', 'D', 'I', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
   'q', '2', 's', 't', '8', 'v', '7', 'x', 'y', 'z', 'A', 'B', 'C', '9', 'E', 'F', 'G', 'H', '0', 'J', 'K', 'L', 'M', 'N', 'O', 'P', '3', 'R',
   '5', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  return arr.sort(function () {
   return (Math.random() - .5);
  });
 };
 shuffle();
 function show_code() {
  var ar1 = '';
  var code = shuffle();
  for (var i = 0; i < 6; i++) {
   ar1 += code[i];
  }
  ;
  //var ar=ar1.join('');
  $(".reg-box .phoKey").text(ar1);
 };
 show_code();
 $(".reg-box .phoKey").click(function () {
  show_code();
 });
}

最后是非常重要的 CSS 代码:

body{
 background: #000;
}
#divID {
  position: fixed;
  left: 47%;
  top: 53%;
  width: 500px;
  margin-left: -200px;
  margin-top: -150px;
  font-family: "黑体";
  /*禁止复制粘贴*/
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select:none;
  color:#fff;
 }
 .register_dialog_info {
  float: left;
  margin-left:10px;
  color: #fff;
  margin-top: 5px;
  font-size: 20px;
 }
 form{padding: 20px 0px;}
 ul li {list-style: none;}
 .sub {
  text-align: center;
 }
 .sub input {
  display: inline-block;
  width: 300px;
  background-color: #012246;
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-family: 黑体;
  outline: none;
  border: none;
  margin: auto;
  border-radius: 10px;
 }
 input[type = "submit"]:hover{cursor: pointer;}

 .reg-box { padding-left: 30px; }

 .reg-box li { line-height: 44px; width: 500px; overflow: hidden; }

 .reg-box li label { width: 68px; height: 50px; float: left; line-height: 50px; text-align: right; padding-right: 20px; }

 .reg-box li input,.reg-box li select{ border-radius: 3px; padding: 6px 0; font-size: 16px; width: 296px; height: 49px; line-height: 28px; border: 1px solid #dddddd; text-indent: 0.5em; float: left; }

 .reg-box li select option{font-size:16px;}

 /*验证码*/
 .add { width: 128px; height: 44px; float: left; _display: inline; cursor: pointer; margin-left: 20px; }

 .reg-box li .sradd { width: 148px; text-indent: 4px; font-size: 14px; }

 .reg-box li .input-code { width: 106px; padding: 10px; font-family: Arial; font-style: italic; color: red; letter-spacing: 1px; cursor: pointer; text-align: center; text-indent: 0; }

 .yzm,.phoKey { background: #012246; text-align: center; line-height: 44px; color: #fff; border-radius: 3px;}

 .phoKey{letter-spacing: 3px; font-size:18px;}

 .yzmc { background: #dddddd; text-align: center; line-height: 44px; color: #999; }

 .error { clear:both;display:block;color: red; padding-left: 90px; padding-bottom:5px;height:20px;float: left; font-size:12px;line-height: 20px;}

 input { background-color: #fff; outline: none; }

 .reg-box li { width: auto; }

 .reg-box li input.errorC, .errorC{ border: 1px solid blue; }

 .reg-box li input.checkedN , .checkedN{ border: 1px solid #1ece6d; }

以上所述是小编给大家介绍的如何写一个含验证码的登录界面详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery+pjax简单示例汇总
Apr 21 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
Javascript typeof 用法
2008/12/28 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
jquery实现动态画圆
2014/12/04 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
西北政法大学自主招生自荐信
2014/01/29 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
酒店员工检讨书
2014/02/18 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
初中语文教学随笔
2015/08/15 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书