Detailed explanation of the function of using jQuery+Angular to implement verification code on the login interface

This article mainly introduces the detailed explanation of the login interface verification code using jQuery and Angular. Friends in need can refer to the following

Written in front:

Previous events , I made a login function using ajax background asynchronous interaction, and added a verification code function on it. The principle behind this function is easy to understand, and it is also very simple to implement. I would like to write a wave to share the process of writing it myself. I've run into a lot of pitfalls, so I'll write it in detail as usual. You can use it as a reference. Friends who like it can give it a like or follow it.

Finally achieved effect:

Before clicking to log in, it will first be judged whether the verification code is correct (the verification code does not need to be distinguished) case (can also be case-sensitive), if the verification code is incorrect, the verification code will be refreshed, and no cross-domain login operation will be performed before the verification code is verified.

the whole idea.

1. Take a four-digit random number

2. Assign the value to the input box of the verification code.

3. Before clicking to log in, use if to determine whether the value of the verification code input box is equal to the value of the input box. If they are equal, go to the next step. If they are not equal, an error will be returned directly

4. The ajax part inside can be directly inserted.

Details:

1. The background image of the verification code box here was found online. It seems that the verification code is more formal, otherwise it looks a bit low.

2. Being case-insensitive actually uses the toUpperCase() method of js to convert lowercase to uppercase. Because it is native js, it can also be used in angular!

3. Encapsulate the verification code into a function, and then call this function at the end when you click to log in. You can refresh the function every time.

4. To prevent the verification code from being copied, use: disabled="disabled" in HTML - to prevent the verification code box text from being selected.

The following is a detailed explanation of the implementation process of the code part (the comments are written in more detail):

htmlThe code should not be explained. If you don’t understand, you can leave it in the comment area ask me. There is some content about angular below. If you haven’t learned it yet, you can skip it. It will not affect the implementation effect. (You can copy the code and try it locally.)

First let’s talk about the process of implementation with jq, and then the process of implementation with angular. Anyone who has read a few of my articles knows that I will try my best to All codes and every step are clearly commented. I hope it can help everyone.

Here is the content of html:

<p class="js5-form" id="js5-form" ng-controller="enterCtrl">
    <p id="enter-all" >
      <h3>jnshu后台登录</h3>
      <form action="" name="myForm">
        <p class="js5-input-p">
          <p class="js5-input-img1"></p>
          <input id="js5-userNum" type="text" name="userName" placeholder="用户名" maxlength="12" ng-model="userName" ng-keyup="mykey($event)" required/>
        </p>
      </form>
      <form action="" name="registerForm">
        <p class="js5-input-p">
          <p class="js5-input-img2"></p>
          <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/>
        </p>
      </form>
      <!--账号和密码的登录框-->
      <form action="" >
        <p class="js5-input-p">
          <span class="js5-input-pSpan">验证码：</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>
        </p>
      </form>

Here is the jq code implementation part:

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=$(&#39;#js5-password&#39;).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();//验证码错误，刷新验证码。
    }
  })
});

This is the angular code implementation part:

The jq part is written in more detail. It is also quite detailed here. If you don’t understand, you can look back at the jq part. The principles are the same. Copy it locally. Try more.

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();//验证后，刷新验证码
      }
    }
  }());

Afterword

I have been writing intermittently for two days, and now I am not writing as fast as before. . That’s pretty much it. If you have any questions, please leave them in the comment area. If you have any shortcomings, you are welcome to give me some guidance and advice.

The above is the detailed content of Detailed explanation of the function of using jQuery+Angular to implement verification code on the login interface. For more information, please follow other related articles on the PHP Chinese website!