使用jQuery,Angular实现登录界面验证码详解


Posted in jQuery onApril 27, 2017

写在前面:

前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波。

最终实现的效果:

使用jQuery,Angular实现登录界面验证码详解 

当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作。

整体思路。

1.取四位随机数

2.赋值到验证码的input框里。

3.在点击登录之前先用if判断验证码input框的值和输入框的值是否相等,相等时进入下一步操作,不相等直接返回错误

4.里面ajax的部分可以直接套进去。

细节:

1.这里的验证码框的背景图片是网上自己找的,显得验证码比较正式,不然显得有点low。

2.不区分大小写实际上就是利用js的toUpperCase()方法是把小写转换成大写,因为是原生js所以在angular中也可以使用!

3.将验证码封装成一个函数,然后在点击登录时在最后调用这个函数,可以每次都刷新函数。

4.避免验证码被复制,在html里面使用:disabled="disabled"——禁止验证码框文字被选中。

下面是代码部分实现过程详解(注释写的比较详细):

html代码应该不会解释了,有不懂的,可以在评论区问我。下面有部分关于angular的内容,暂时还没学到这里可以跳过去,没有影响到实现效果的。(可以把代码复制过去,然后在自己本地试试。)

先放用jq实现的过程,然后放angular实现的过程,看过我几篇文章的都知道,我尽量会把所有代码,每一步都注释的清清楚楚,希望可以帮助到大家。

这里是html的内容:

<div class="js5-form" id="js5-form" ng-controller="enterCtrl">
    <div id="enter-all" >
      <h3>jnshu后台登录</h3>
      <form action="" name="myForm">
        <div class="js5-input-div">
          <div class="js5-input-img1"></div>
          <input id="js5-userNum" type="text" name="userName" placeholder="用户名" maxlength="12" ng-model="userName" ng-keyup="mykey($event)" required/>
        </div>
      </form>
      <form action="" name="registerForm">
        <div class="js5-input-div">
          <div class="js5-input-img2"></div>
          <input id="js5-password" type="password" name="userPsd" placeholder="密码" maxlength="20" ng-model="userPsd" ng-keyup="mykey($event)" ng-minlength="5" ng-maxlength="16" required/>
        </div>
      </form>
      <!--账号和密码的登录框-->
      <form action="" >
        <div class="js5-input-div">
          <span class="js5-input-divSpan">验证码:</span>
          <input type="text" placeholder="不区分大小写" class="js5-form3-input" id="js5-form3-input" ng-model="writeCode" maxlength="6" ng-keyup="mykey($event)">
          <input type="text" class="js5-authCode" value="" id="js5-authCode" ng-model="showAuthCode" disabled="disabled">
           <!--disabled="disabled"禁止验证码框文字被选中-->
          <span class="spanShift" ng-click="changeVerify()">获取</span>
        </div>
      </form>

这里是jq代码实现部分:

var authCode;
  randomCode=$("#js5-authCode").eq(0);//获取验证码出现的方框dom
console.log(randomCode);
function createCode() {
  authCode="";//设置这个为空变量,然后往里面添加随机数
  var authCodeLength=4;//随机数的长度
  randomArray=[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'];
  //创建一个数组,随机数从里面选择四位数或者更多
  for(var i=0;i<authCodeLength;i++){
    var index=Math.floor(Math.random()*36);//随机取一位数
    authCode +=randomArray[index];//取四位数,并+相连
  }
  console.log(authCode);//取到四位随机数之后,跳出循环
  randomCode.val(authCode);//将四位随机数赋值给验证码出现的方框
  console.log(randomCode.val());
}
//以上是封装的获取验证码的函数
$(function () {//当文档加载结束后,运行这个函数
  createCode();//一开始先运行一遍取随机数的函数
  $("#js5-btn").click(function () {//这里是一个点击事件
    console.log(window.randomCode);
    //这里写了一个必报,window.randomCode是在文档里面找到这个dom,否则上文的四个随机数传不到这里来
    var randomCode=window.randomCode.val();
    console.log(randomCode);
    var authInput=$("#js5-form3-input").val().toUpperCase(),
      user=$("#js5-userNum").val(),
      psd=$('#js5-password').val();
    //上面三个是分别获取验证码输入框的值,账号的值,密码的值。
    //验证码输入框这里,最后toUpperCase()方法是把小写转换成大写
    console.log(authInput);
    console.log(randomCode);
    console.log(user,psd);
    if (randomCode===authInput) {
    //验证验证码,在验证码输入框与验证码的值不相等之前,是不会进入下面登录的步骤的,验证码是第一步关卡
      var firstAjax = new XMLHttpRequest();
      //创建ajax对象,这里是ajax跨域的部分
      firstAjax.open("POST", "这里是你url跨域的地址", true);
      //连接服务器,跨域。
      firstAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //setRequestHeader() 方法指定了一个 HTTP 请求的头部,它应该包含在通过后续 send() 调用而发布的请求中。
      //可以理解为,这是http的请求头,固定格式,位置必须要在open之后,send之前。
      firstAjax.send("name=" + user + "&pwd=" + psd);
      //在使用POST方式时参数代表着向服务器发送的数据,前面两个是账号框和密码框
      firstAjax.onreadystatechange = function () {//当参数被传入服务器的时候,引用监听事件。
        if (firstAjax.readyState == 4) {//readyState四种状态,当执行四步完成之后
          if (firstAjax.status == 200) {//返回的是200,代表成功,404未找到。
            var returnValue = JSON.parse(firstAjax.responseText);//取回由服务器返回的数据
            console.log(returnValue);
            if (returnValue.code == 0) {//这里是后端定义的,当code==0的时候,代表登录正确。
              window.location.href = "https://www.baidu.com/index.php?tn=98012088_3_dg&ch=1";
              //后端返回的数据验证成功就跳转链接。
            }
            else {
              $("#js5Message").text(returnValue.message);//当code不等于0时,返回出错信息
            }
          } else {
            alert("出错咯,咯咯咯");//返回的不是200的时候,出错。
          }
        }
      };
      createCode();//点击登录按钮,验证之后会刷新验证码
    }
    else {
      $("#js5Message").text("验证码错误,请重新输入");
      createCode();//验证码错误,刷新验证码。
    }
  })
});

这是是angular代码实现部分:

jq部分写的详细一点,这里也挺详细的,如果不懂的话,可以回头看看jq部分,原理都是一样的,复制到本地自己多试试。

var enter=angular.module("myApp");
enter.controller('enterCtrl',['$scope','$http','$state',function ($scope,$http,$state) {
  $scope.changeVerify=function () {//定义了一个点击事件,获取验证码
    var authCode="";
    var authCodeLength=4;//取几个随机数字
    var randomArray=[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'];
    for(var i=0;i<authCodeLength;i++){
      var index=Math.floor(Math.random()*36);//随机取一位数
      authCode +=randomArray[index];//取四位数,并+相连
    }
    $scope.showAuthCode=authCode;//赋值
    console.log($scope.showAuthCode);
  };
  //上面是封装的获取验证码的函数,会在下面进行调用
 (function () {
    $scope.changeVerify();//调用点击事件。
    $scope.enter=function (userName,userPsd) {
      //点击登录按钮事件,将双向绑定的账号密码当做参数传入函数
      if ($scope.writeCode.toUpperCase() ==$scope.showAuthCode){//toUpperCase()将小写转化为大写
        //双向绑定验证码输入框,可以直接使用,这里是验证验证码
        $http({
          method:"POST",
          url:"你的跨域地址",//$http的固定格式
          params:{
            "name":userName,
            "pwd":userPsd
            //双向绑定的参数传到下个页面
          }
        }).then(function (res) {
          //获取服务器返回的参数
          console.log(res);
          if (res.data.code!==0){
            //参数不为0的时候,弹出提示
            alert(res.data.message);
          }else {
            //参数为0的时候,跳转页面
            $state.go("home.studentList");
          }
        })
      }else {
        alert("验证码输入错误咯,咯咯咯");
        $scope.changeVerify();//验证后,刷新验证码
      }
    }
  }());

后话

断断续续写了两天,现在写的没有之前那么快了。。差不多就以上这些内容,有问题可在评论区留言。有不足欢迎指导,拍砖。

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

jQuery 相关文章推荐
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
You might like
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
如何实现JS函数的重载
2006/09/22 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python开发一款翻译工具
2020/10/10 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
彩色的翅膀教学反思
2014/04/25 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
python操作xlsx格式文件并读取
2021/06/02 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python