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

最新推荐文章于 2024-08-19 09:29:46 发布

子月吾生

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量1.8k

点赞数 5

分类专栏： work Vue 实践案列文章标签：前端登陆 vue 登陆前校验 flex布局

本文链接：https://blog.csdn.net/Sunday97/article/details/108444634

版权

本文介绍了使用Vue框架实现前端验证码登录模块的过程，包括输入框HTML结构和完整的JS代码，展示了具体的登陆前校验和界面布局，采用flex布局确保界面适应性。

摘要由CSDN通过智能技术生成

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

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

       //号码输入框
        <input
            class="login-input login-phone"
            placeholder="请输入你的手机号码"
            type="number"
            v-model="loginNumberVal"
            @input="lenControl"
          />
          
       //验证码输入框
       <input
            class="login-input login-code"
            placeholder="请输入短信验证码"
            type="number"
            v-model="loginCodeVal"
            @input="lenControl"
          />

      //获取验证码按钮
     <input
            class="getCode"
            type="button"
            @click.stop="toGetCode"
            ref="eleCode"
            :value="codeText"
          />

完整的js部分：

<script>
export default {
   
  name: "Login",
  data() {
   
    return {
   
      loginNumberVal: "",
      loginCodeVal: "",
      rightCode: 1234,
      isRegistered: true, //是否已注册
      isTrue: false,
      codeText: "获取验证码",
      timer: 5,//倒计时时间设置成五秒
    };
  },
  components: {
   },
  created() {
   
    let urlParams = this.$route.query;
    if (this.$route.query.reqParams) {
   
      this.reqParams = this.$route.query.reqParams;
    } else {
   
      this.reqParams = ``;
    }
  },
  computed: {
   
    //登陆按钮是否可点击
    isDisabled() {
   
      if (this.loginNumberVal && this.loginCodeVal && this.isTrue) {
   
        return false;
      }
      return true;
    },
    isDel() {
   
      if (this.loginNumberVal.length) {
   
        return true;
      }
      return false;
    },
  },
  methods: {
   
    //输入框长度控制
    lenControl() {
   
      if (this.loginNumberVal.length > 11) {
   
        this.loginNumberVal = this.loginNumberVal.slice(0, 11);
      }
      if (this.loginCodeVal.length > 6) {
   
        this.loginCodeVal = this.loginCodeVal.slice(0, 6);
      }
    },
    //号码输入框右边的那个叉
    delBtn() {
   
      this.loginNumberVal = "";
    },
    //验证码倒计时
    codeTimer() {
   
      let _this = this;
      if (this.timer