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

写在前面：

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

最终实现的效果：

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

整体思路。

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实现登录界面验证码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# jq  # angular实现登录界面验证码  # 使用jQuery如何写一个含验证码的登录界面  # jquery登录的异步验证操作示例  # javascript和jquery实现用户登录验证  # jQuery+AJAX实现遮罩层登录验证界面（附源码）  # S2SH整合JQuery+Ajax实现登录验证功能实现代码  # ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登  # jQuery.ajax 用户登录验证代码  # jquery ajax 登录验证实现代码  # jQuery实现验证用户登录  # 验证码  # 随机数  # 四位  # 输入框  # 这是  # 绑定  # 不懂  # 可以直接  # 写了  # 跳转  # 验证码错误  # 转换成  # 小编  # 的是  # 后端  # 是一个  # 几个  # 文档  # 是在  # 还没 

相关文章： 大同网页,大同瑞慈医院官网？  制作网站的基本流程,设计网站的软件是什么？  javascript中的try catch异常捕获机制用法分析  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  智能起名网站制作软件有哪些,制作logo的软件？  C#如何在一个XML文件中查找并替换文本内容  如何在IIS管理器中快速创建并配置网站？  高防服务器租用指南：配置选择与快速部署攻略  公司网站的制作公司,企业网站制作基本流程有哪些？  建站之星云端配置指南：模板选择与SEO优化一键生成  网站制作大概多少钱一个,做一个平台网站大概多少钱？  网站制作企业,网站的banner和导航栏是指什么？  电脑免费海报制作网站推荐,招聘海报哪个网站多？  如何快速查询网址的建站时间与历史轨迹？  如何快速生成高效建站系统源代码？  已有域名能否直接搭建网站？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  如何零成本快速生成个人自助网站？  如何通过山东自助建站平台快速注册域名？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  制作网页的网站有哪些,电脑上怎么做网页？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  如何在腾讯云服务器快速搭建个人网站？  如何在VPS电脑上快速搭建网站？  大连 网站制作,大连天途有线官网？  淘宝制作网站有哪些,淘宝网官网主页？  建站之星24小时客服电话如何获取？  如何通过商城自助建站源码实现零基础高效建站？  建站org新手必看：2024最新搭建流程与模板选择技巧  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  公司网站制作需要多少钱,找人做公司网站需要多少钱？  如何自定义建站之星模板颜色并下载新样式？  建站之星如何实现五合一智能建站与营销推广？  内网网站制作软件,内网的网站如何发布到外网？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  山东云建站价格为何差异显著？  如何在云主机快速搭建网站站点？  建站之星免费模板：自助建站系统与智能响应式一键生成  已有域名和空间，如何快速搭建网站？  如何在阿里云完成域名注册与建站？  制作销售网站教学视频,销售网站有哪些？  ,购物网站怎么盈利呢？  ,有什么在线背英语单词效率比较高的网站？  网站制作话术技巧,网站推广做的好怎么话术？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊？