使用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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 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
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python提取字典key列表的方法
2015/07/11 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
python 实用工具状态机transitions
2020/11/21 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
学校安全教育月活动总结
2014/07/07 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
学生会辞职信
2015/03/02 职场文书
团拜会主持词
2015/07/04 职场文书
小学音乐课教学反思
2016/02/18 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python