前端验证码登陆模块的实现(vue实现)

亦凉 2022-12-04 08:47 339阅读 0赞

实现效果如下：
在这里插入图片描述
用vue写的，但实现逻辑都是一样的。

摘取出来的输入框的html部分：

  1. //号码输入框
  2.         <input
  3.             class="login-input login-phone"
  4.             placeholder="请输入你的手机号码"
  5.             type="number"
  6.             v-model="loginNumberVal"
  7.             @input="lenControl"
  8.           />
  10.        //验证码输入框
  11.        <input
  12.             class="login-input login-code"
  13.             placeholder="请输入短信验证码"
  14.             type="number"
  15.             v-model="loginCodeVal"
  16.             @input="lenControl"
  17.           />
  19.       //获取验证码按钮
  20.      <input
  21.             class="getCode"
  22.             type="button"
  23.             @click.stop="toGetCode"
  24.             ref="eleCode"
  25.             :value="codeText"
  26.           />

完整的js部分：

  1. <script>
  2. export default { 
  3.   name: "Login",
  4.   data() { 
  5.     return { 
  6.       loginNumberVal: "",
  7.       loginCodeVal: "",
  8.       rightCode: 1234,
  9.       isRegistered: true, //是否已注册
  10.       isTrue: false,
  11.       codeText: "获取验证码",
  12.       timer: 5,//倒计时时间设置成五秒
  13.     };
  14.   },
  15.   components: { },
  16.   created() { 
  17.     let urlParams = this.$route.query;
  18.     if (this.$route.query.reqParams) { 
  19.       this.reqParams = this.$route.query.reqParams;
  20.     } else { 
  21.       this.reqParams = ``;
  22.     }
  23.   },
  24.   computed: { 
  25.     //登陆按钮是否可点击
  26.     isDisabled() { 
  27.       if (this.loginNumberVal && this.loginCodeVal && this.isTrue) { 
  28.         return false;
  29.       }
  30.       return true;
  31.     },
  32.     isDel() { 
  33.       if (this.loginNumberVal.length) { 
  34.         return true;
  35.       }
  36.       return false;
  37.     },
  38.   },
  39.   methods: { 
  40.     //输入框长度控制
  41.     lenControl() { 
  42.       if (this.loginNumberVal.length > 11) { 
  43.         this.loginNumberVal = this.loginNumberVal.slice(0, 11);
  44.       }
  45.       if (this.loginCodeVal.length > 6) { 
  46.         this.loginCodeVal = this.loginCodeVal.slice(0, 6);
  47.       }
  48.     },
  49.     //号码输入框右边的那个叉
  50.     delBtn() { 
  51.       this.loginNumberVal = "";
  52.     },
  53.     //验证码倒计时
  54.     codeTimer() { 
  55.       let _this = this;
  56.       if (this.timer >= 1) { 
  57.         this.$refs.eleCode.setAttribute("disabled", "true");
  58.         this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");
  59.         this.$refs.eleCode.style.backgroundColor = "#fce0d2";
  60.         this.timer--;
  61.         setTimeout(function () { 
  62.           _this.codeTimer();
  63.         }, 1000);
  64.       } else { 
  65.         this.$refs.eleCode.setAttribute("value", this.codeText);
  66.         this.$refs.eleCode.removeAttribute("disabled");
  67.         this.$refs.eleCode.style.backgroundColor = "#f16622";
  68.         this.timer = 5;
  69.       }
  70.     },
  71.     //获取验证码
  72.     toGetCode() { 
  73.       let model = /^[1][3,4,5,7,8,9][0-9]{9}$/;
  74.       if (model.test(this.loginNumberVal)) { 
  75.         //格式正确调用接口发送验证码
  76.         alert("正确的号码格式，可以获取验证码");
  77.         this.codeTimer();
  78.         this.isTrue = true;
  79.       } else { 
  80.         alert("手机号格式不正确");
  81.       }
  82.     },
  83.     //登陆
  84.     toLogin() { 
  85.       console.log("登陆,判断手机号是否已经注册、验证码是否正确");
  86.       if (this.isRegistered && this.loginCodeVal == this.rightCode) { 
  87.         alert("可以登录");
  88.         this.$axios
  89.           .post("?_m=loginPaper&_a=loginCommit", { //调取登陆的接口
  90.             loginPhoneNumber: this.loginNumberVal,
  91.             loginPhoneCode: this.loginCodeVal,
  92.           })
  93.           .then((res) => { 
  94.             if (res.ret === 0) { 
  95.             this.$store.commit();//储存要提交的数据
  96.             this.$router.replace({ //登陆成功之后要跳转的页面
  97.               path: "/exam/test",
  98.               query: {  is_pass: res.data.is_pass, reqParams: this.reqParams },
  99.             });
  100.             } else { 
  101.               alert(res.msg || "网络错误");
  102.             }
  103.           })
  104.           .catch(() => { 
  105.             alert("网络错误");
  106.           });
  107.       }
  108.     },
  109.   },
  110. };
  111. </script>

整个完整的代码如下所示：

  1. <template>
  2.   <div class="login">
  3.     <section class="login-box">
  4.       <div class="login-wrap">
  5.         <div class="login-icon">
  6.           <!-- <img class="icon-top" src="@/assets/images/login_top.png" /> -->
  7.         </div>
  8.         <div class="input-wrap">
  9.           <input
  10.             class="login-input login-phone"
  11.             placeholder="请输入你的手机号码"
  12.             type="number"
  13.             v-model="loginNumberVal"
  14.             @input="lenControl"
  15.           />
  16.           <img class="icon-left" src="@/assets/images/login_phone.png" />
  17.           <img class="icon-right" @click="delBtn" v-if="isDel" src="@/assets/images/login_del.png" />
  18.         </div>
  19.         <div class="input-wrap">
  20.           <input
  21.             class="login-input login-code"
  22.             placeholder="请输入短信验证码"
  23.             type="number"
  24.             v-model="loginCodeVal"
  25.             @input="lenControl"
  26.           />
  27.           <img class="icon-left" src="@/assets/images/login_code.png" />
  28.           <input
  29.             class="getCode"
  30.             type="button"
  31.             @click.stop="toGetCode"
  32.             ref="eleCode"
  33.             :value="codeText"
  34.           />
  35.           <!-- <span class="getCode" @click.stop="toGetCode">获取验证码</span> -->
  36.         </div>
  37.         <hll-button title="登录" @click.stop="toLogin" class="login-btn" :disabled="isDisabled"></hll-button>
  38.       </div>
  39.     </section>
  40.   </div>
  41. </template>
  42. <script>
  43. export default { 
  44.   name: "Login",
  45.   data() { 
  46.     return { 
  47.       loginNumberVal: "",
  48.       loginCodeVal: "",
  49.       rightCode: 1234,
  50.       isRegistered: true, //是否已注册
  51.       isTrue: false,
  52.       codeText: "获取验证码",
  53.       timer: 5,//倒计时时间设置成五秒
  54.     };
  55.   },
  56.   components: { },
  57.   created() { 
  58.     let urlParams = this.$route.query;
  59.     if (this.$route.query.reqParams) { 
  60.       this.reqParams = this.$route.query.reqParams;
  61.     } else { 
  62.       this.reqParams = ``;
  63.     }
  64.   },
  65.   computed: { 
  66.     //登陆按钮是否可点击
  67.     isDisabled() { 
  68.       if (this.loginNumberVal && this.loginCodeVal && this.isTrue) { 
  69.         return false;
  70.       }
  71.       return true;
  72.     },
  73.     isDel() { 
  74.       if (this.loginNumberVal.length) { 
  75.         return true;
  76.       }
  77.       return false;
  78.     },
  79.   },
  80.   methods: { 
  81.     //输入框长度控制
  82.     lenControl() { 
  83.       if (this.loginNumberVal.length > 11) { 
  84.         this.loginNumberVal = this.loginNumberVal.slice(0, 11);
  85.       }
  86.       if (this.loginCodeVal.length > 6) { 
  87.         this.loginCodeVal = this.loginCodeVal.slice(0, 6);
  88.       }
  89.     },
  90.     //号码输入框右边的那个叉
  91.     delBtn() { 
  92.       this.loginNumberVal = "";
  93.     },
  94.     //验证码倒计时
  95.     codeTimer() { 
  96.       let _this = this;
  97.       if (this.timer >= 1) { 
  98.         this.$refs.eleCode.setAttribute("disabled", "true");
  99.         this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");
  100.         this.$refs.eleCode.style.backgroundColor = "#fce0d2";
  101.         this.timer--;
  102.         setTimeout(function () { 
  103.           _this.codeTimer();
  104.         }, 1000);
  105.       } else { 
  106.         this.$refs.eleCode.setAttribute("value", this.codeText);
  107.         this.$refs.eleCode.removeAttribute("disabled");
  108.         this.$refs.eleCode.style.backgroundColor = "#f16622";
  109.         this.timer = 5;
  110.       }
  111.     },
  112.     //获取验证码
  113.     toGetCode() { 
  114.       let model = /^[1][3,4,5,7,8,9][0-9]{9}$/;
  115.       if (model.test(this.loginNumberVal)) { 
  116.         //格式正确调用接口发送验证码
  117.         alert("正确的号码格式，可以获取验证码");
  118.         this.codeTimer();
  119.         this.isTrue = true;
  120.       } else { 
  121.         alert("手机号格式不正确");
  122.       }
  123.     },
  124.     //登陆
  125.     toLogin() { 
  126.       console.log("登陆,判断手机号是否已经注册、验证码是否正确");
  127.       if (this.isRegistered && this.loginCodeVal == this.rightCode) { 
  128.         alert("可以登录");
  129.         this.$axios
  130.           .post("?_m=loginPaper&_a=loginCommit", { //调取登陆的接口
  131.             loginPhoneNumber: this.loginNumberVal,
  132.             loginPhoneCode: this.loginCodeVal,
  133.           })
  134.           .then((res) => { 
  135.             if (res.ret === 0) { 
  136.             this.$store.commit();//储存要提交的数据
  137.             this.$router.replace({ //登陆成功之后要跳转的页面
  138.               path: "/exam/test",
  139.               query: {  is_pass: res.data.is_pass, reqParams: this.reqParams },
  140.             });
  141.             } else { 
  142.               alert(res.msg || "网络错误");
  143.             }
  144.           })
  145.           .catch(() => { 
  146.             alert("网络错误");
  147.           });
  148.       }
  149.     },
  150.   },
  151. };
  152. </script>
  154. <style lang="scss" scoped>
  155. //使用的是flex布局，进行自适应
  156. .login-box { 
  157.   display: flex;
  158.   display: -webkit-flex;
  159. }
  160. .login-wrap { 
  161.   display: flex;
  162.   display: -webkit-flex;
  163.   flex-direction: column;
  164.   padding: 40px;
  165.   flex: 1;
  166. }
  167. .login-icon { 
  168.   margin: 20% auto;
  169. }
  170. .icon-top { 
  171.   width: 180px;
  172.   height: 60px;
  173.   flex: 1;
  174. }
  175. .input-wrap { 
  176.   flex: 1;
  177.   position: relative;
  178. }
  179. .login-input { 
  180.   display: block;
  181.   border-bottom: 1px solid silver;
  182.   height: 60px;
  183.   box-sizing: border-box;
  184.   padding-left: 30px;
  185.   width: 100%;
  186. }
  187. .icon-left { 
  188.   position: absolute;
  189.   left: 0;
  190.   top: 24px;
  191. }
  192. .icon-right { 
  193.   width: 15px;
  194.   height: 15px;
  195.   position: absolute;
  196.   right: 10px;
  197.   top: 24px;
  198. }
  199. .getCode { 
  200.   width: 90px;
  201.   position: absolute;
  202.   right: 5px;
  203.   bottom: 10px;
  204.   color: #fff;
  205.   background-color: #f16622;
  206.   border-radius: 5px;
  207.   padding: 10px;
  208. }
  209. .login-btn { 
  210.   margin-top: 10%;
  211. }
  212. </style>

发表评论

表情：
评论列表 （有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue实现验证码

    在Web应用程序中，为了避免机器自动化或恶意攻击，很常见的做法是要求用户在表单提交之前输入验证码。验证码最常见的形式是图片验证码，因为图片验证码最大程度地防止了自动化机器调用A

    短命女短命女/ 0 赞/ 76 阅读