怎么使用jQuery,Angular实现登录界面验证码-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么使用jQuery,Angular实现登录界面验证码

小编给大家分享一下怎么使用jQuery,Angular实现登录界面验证码，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、网站空间、营销软件、网站建设、东西湖网站维护、网站推广。

最终实现的效果：

怎么使用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的内容：


    
      jnshu后台登录

验证码：

获取

这里是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服务器，跨域。
      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以上是“怎么使用jQuery,Angular实现登录界面验证码”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！            
            
                                                            

                                                分享题目：怎么使用jQuery,Angular实现登录界面验证码                                                

                                                文章地址：http://sczitong.cn/article/pisooi.html

新闻中心

jnshu后台登录

其他资讯