vue密码登陆、邮箱验证码登陆、注册、重置实现

于 2024-06-25 16:13:44 发布
阅读量347 收藏 4
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64751323/article/details/139956319
版权

页面使用elementUi实现，使用axios发送请求，所以先在项目里安装

npm install element-ui -S
npm install axios

邮箱发送验证码的实现可以去 完整实现项目在文末

https://blog.csdn.net/qq_64751323/article/details/139938646?spm=1001.2014.3001.5502

密码登陆页面

<template>
  <div class="home">
    <br>
    <div class="login">
      <br>
      <div class="content">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="" prop="username" style="font-size: 30px">
            <el-input class="logins" type="text" v-model="ruleForm.username" autocomplete="off"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input class="logins" type="password" v-model="ruleForm.pass" autocomplete="on"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :plain="true" @click="userlogin('ruleForm')">登陆</el-button>
            <router-link :to="{path: '/enrollLogin'}">
              <el-button @click="refromnull">注册</el-button>
            </router-link>
            <router-link :to="{path: '/codeLogin'}">
              <el-button type="danger" @click="refromnull">邮箱登陆</el-button>
            </router-link>
          </el-form-item>
          <router-link :to="{path: '/resetLogin'}">
            <span style="margin-left: 250px">忘记密码?</span>
          </router-link>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import router from "@/router";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        username: '',
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    userlogin() {
      if (this.ruleForm.username === "") {
        this.$message('请输入用户名');
      } else if (this.ruleForm.pass === "") {
        this.$message('请输入密码');
      } else {
        axios.post("/api/user/login", {
          username: this.ruleForm.username,
          password: this.ruleForm.pass
        }).then(res => {
          if (res.data.code === 0) {
            this.$message("登陆成功")
            router.push('/p1')
          } else {
            this.ruleForm.pass = ''
            this.$message(res.data.message)
          }
          console.log("登陆成功" + res.data)
        }).catch(roror => {
          console.log("登陆失败" + roror.error)
        })
      }

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    refromnull() {
      this.ruleForm.pass = null
      this.ruleForm.username = null
    }

  }
}
</script>

<style scoped>
.home {
  background: url("https://guanhuaer.oss-cn-chengdu.aliyuncs.com/login.jpg");
  //背景可以是网址和本地文件，这里是我的oss仓库图片地址
  background-size: cover;
  height: 100vh;
}

.el-input {
  font-size: 20px;
}

.el-form-item__error {
  font-size: 16px;
}

.login {
  display: flex;
  width: 400px;
  height: 400px;
  background-color: white;
  opacity: 0.7;
  justify-content: center;
  margin: auto;
  margin-top: 20%;
  text-align: center;

  .logins {
    width: 300px;
    justify-content: center;
  }
}


.content {
  margin-top: 100px;

  .el-button {
    margin-left: 10px;
  }
}
</style>

验证码登陆

<template>
  <div class="home">
    <br>
    <div class="login">
      <br>
      <div class="content">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="" prop="email">
            <el-input type="email" v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <el-form-item label="" prop="code">
            <div class="verify-wrapper">
              <el-input style="width: 200px;" type="text" maxlength="6" suffix-icon="el-icon-lock"
                        placeholder="请输入验证码" v-model="ruleForm.code"/>
              <el-button class="btn-orange" style="margin-left: 5px" :plain="true" :disabled="disabled" @click="tackBtn">{{ valiBtn }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="codelogin">登陆</el-button>
            <router-link :to="{path: '/enrollLogin'}">
            <el-button @click="refromnull" :plain="true">注册</el-button>
            </router-link>
            <router-link :to="{path: '/userLogin'}">
            <el-button type="danger" @click="refromnull">密码登陆</el-button>
            </router-link>
          </el-form-item>
        </el-form>
        <router-link :to="{path: '/resetLogin'}">
          <span style="margin-left: 250px">忘记密码?</span>
        </router-link>
      </div>
    </div>
  </div>

</template>


<script>
import axios from "axios";
import router from "@/router";

export default {
  data() {
    return {
      disabled: false,
      valiBtn: '获取验证码',
      ruleForm: {
        email: '',
        code: ''
      },
      rules: {
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ]
      }
    };
  },
  methods: {
    codelogin() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailRegex.test(this.ruleForm.email) == true && this.ruleForm.code != "") {
        axios({
          url: '/api/user/codelogin',
          method: "post",
          data: {
            email: this.ruleForm.email,
            code: this.ruleForm.code
          }
        }).then(res => {
          this.$message(res.data.message)
          router.push("/p1")
        }).catch(error => {
          console.log("登陆失败" + error.error)
        })
      } else {
        this.$message("请输入信息")
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    tackBtn() {       //验证码倒数60秒
      // 验证电子邮件地址的正则表达式函数
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      console.log(emailRegex.test(this.ruleForm.email))
      if (this.ruleForm.email == "" || emailRegex.test(this.ruleForm.email) == false) {
        this.$message('请输入正确的邮箱');
      } else {
        let time = 60;
        axios({
          url: '/api/user/code',
          method: 'post',
          data: {
            email: this.ruleForm.email
          }
        }).then(res => {
          if (res.data.data.code == 0) {
            console.log("发送成功" + res.data.data)
          } else {
            console.log("发送失败" + res.data.data)
          }
        }).catch(error => {
          console.log("发送失败" + error.error)
        })
        let timer = setInterval(() => {
          if (time == 0) {
            clearInterval(timer);
            this.valiBtn = '获取验证码';
            this.disabled = false;
          } else {
            this.disabled = true;
            this.valiBtn = time + '秒后重试';
            time--;
          }
        }, 1000);
      }
    },

    refromnull() {
      this.ruleForm.code = null
      this.ruleForm.email = null
    }
  }
}
</script>

<style scoped>
.home {
  background: url("@/assets/login.jpg");
  background-size: cover;
  height: 100vh;
}

.el-input {
  font-size: 20px;
}

.el-form-item__error {
  font-size: 16px;
}

.login {
  display: flex;
  width: 400px;
  height: 400px;
  background-color: white;
  opacity: 0.7;
  justify-content: center;
  margin: auto;
  margin-top: 20%;
  text-align: center;

  .logins {
    width: 300px;
    justify-content: center;
  }
}
.content {
  margin-top: 100px;
  .el-button {
    margin-left: 10px;
  }
}
</style>

注册

<template>
  <div class="home">
    <br>
    <div class="login">
      <br>
      <div class="zhuce">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="" prop="username" style="font-size: 30px">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="" prop="email">
            <el-input type="email" v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="on"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="on"
                      placeholder="请确认密码"></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <div class="verify-wrapper">
              <el-input style="width: 220px" type="text" maxlength="6" suffix-icon="el-icon-lock"
                        placeholder="请输入验证码" v-model="ruleForm.code"/>
              <el-button class="btn-orange" style="margin-left: 10px" :plain="true" :disabled="disabled"
                         @click="tackBtn">{{ valiBtn }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="enroll">注册</el-button>
            <router-link :to="{path: '/userLogin'}">
              <el-button type="primary" style="margin-left: 15px" @click="refromnull">登陆</el-button>
            </router-link>
          </el-form-item>
        </el-form>
        <router-link :to="{path: '/resetLogin'}">
          <span @click="refromnull" style="margin-left: 270px">忘记密码?</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import router from "@/router";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      disabled: false,
      valiBtn: '获取验证码',
      ruleForm: {
        pass: '',
        checkPass: '',
        email: '',
        username: '',
        code: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ]
      }
    };
  },
  methods: {
    enroll() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      if (this.ruleForm.username !== "" && this.ruleForm.email !== "" && emailRegex.test(this.ruleForm.email) === true &&
          this.ruleForm.pass !== "" && this.ruleForm.checkPass !== "" && this.ruleForm.pass === this.ruleForm.checkPass
      ) {
        axios.post("/api/user/register", {
          username: this.ruleForm.username,
          password: this.ruleForm.pass,
          email: this.ruleForm.email,
          code: this.ruleForm.code
        }).then(res => {
          if (res.data.code === 0) {
            this.$message('注册成功');
            router.push("/userLogin")
            console.log("注册成功" + res.data.code)
          } else {
            this.$message(res.data.message)
          }
        }).catch(roror => {
          console.log("注册失败" + roror.error)
        })
      } else {
        this.$message('请输入信息');
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    tackBtn() {       //验证码倒数60秒
      // 验证电子邮件地址的正则表达式函数
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      console.log(emailRegex.test(this.ruleForm.email))
      if (this.ruleForm.email === "" || emailRegex.test(this.ruleForm.email) === false) {
        this.$message('请输入正确的邮箱');
      } else {
        let time = 60;
        axios({
          url: '/api/user/code',
          method: 'post',
          data: {
            email: this.ruleForm.email
          }
        }).then(res => {
          if (res.data.data.code === 0) {
            console.log("发送成功" + res.data.data)
          } else {
            console.log("发送失败" + res.data.data)
          }
        }).catch(error => {
          console.log("发送失败" + error.error)
        })
        let timer = setInterval(() => {
          if (time == 0) {
            clearInterval(timer);
            this.valiBtn = '获取验证码';
            this.disabled = false;
          } else {
            this.disabled = true;
            this.valiBtn = time + '秒后重试';
            time--;
          }
        }, 1000);
      }

    },

    refromnull() {
      this.ruleForm.code = null
      this.ruleForm.pass = null
      this.ruleForm.checkPass = null
      this.ruleForm.email = null
      this.ruleForm.username = null
    }

  }
}
</script>

<style scoped>
.home {
  background: url("@/assets/login.jpg");
  background-size: cover;
  height: 100vh;
}

.el-input {
  font-size: 20px;
}

.el-form-item__error {
  font-size: 16px;
}

.login {
  display: flex;
  width: 400px;
  height: 440px;
  background-color: white;
  opacity: 0.7;
  justify-content: center;
  margin: auto;
  margin-top: 20%;
  text-align: center;

  .logins {
    width: 300px;
    justify-content: center;
  }
}

.zhuce {
  margin-top: 20px;
}

</style>

重置

<template>
  <div class="home">
    <br>
    <div class="login">
      <div class="zhuce">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="" prop="email">
            <el-input type="email" v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="on"
                      placeholder="请输入密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="on"
                      placeholder="请确认密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <div class="verify-wrapper">
              <el-input style="width: 200px" type="text" maxlength="6" suffix-icon="el-icon-lock"
                        placeholder="请输入验证码" v-model="ruleForm.code"/>
              <el-button class="btn-orange" style="margin-right: -2px" :plain="true" :disabled="disabled"
                         @click="tackBtn">{{ valiBtn }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <router-link :to="{path: '/userLogin'}">
              <el-button type="primary" @click="refromnull">登陆</el-button>
            </router-link>
            <el-button @click="reset" :plain="true">重置</el-button>
          </el-form-item>
        </el-form>
        <router-link :to="{path: '/enrollLogin'}">
          <span @click="refromnull" style="margin-left: 270px">没有账号?</span>
        </router-link>
      </div>
    </div>
  </div>

</template>


<script>
import axios from "axios";
import router from "@/router";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      disabled: false,
      valiBtn: '获取验证码',
      ruleForm: {
        pass: '',
        checkPass: '',
        email: '',
        code: ''
      },
      rules: {
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ]
      }
    };
  },

  methods: {
    reset() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailRegex.test(this.ruleForm.email) === true && this.ruleForm.code !== "") {
        axios({
          url: '/api/user/reset',
          method: "post",
          data: {
            email: this.ruleForm.email,
            password: this.ruleForm.pass,
            code: this.ruleForm.code
          }
        }).then(res => {
          if (res.data.code === 0) {
            this.$message("重置成功")
            router.push("/userLogin")
          } else {
            this.$message(res.data.message)
          }
        }).catch(error => {
          console.log("重置失败" + error.error)
        })
      } else {
        this.$message("请输入信息")
      }
    },
    tackBtn() {       //验证码倒数60秒
      // 验证电子邮件地址的正则表达式函数
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      console.log(emailRegex.test(this.ruleForm.email))
      if (this.ruleForm.email === "" || emailRegex.test(this.ruleForm.email) === false) {
        this.$message('请输入正确的邮箱');
      } else {
        let time = 60;
        axios({
          url: '/api/user/code',
          method: 'post',
          data: {
            email: this.ruleForm.email
          }
        }).then(res => {
          if (res.data.data.code == 0) {
            console.log("发送成功" + res.data.data)
          } else {
            console.log("发送失败" + res.data.data)
          }
        }).catch(error => {
          console.log("发送失败" + error.error)
        })
        let timer = setInterval(() => {
          if (time == 0) {
            clearInterval(timer);
            this.valiBtn = '获取验证码';
            this.disabled = false;
          } else {
            this.disabled = true;
            this.valiBtn = time + '秒后重试';
            time--;
          }
        }, 1000);
      }
    },
    refromnull() {
      this.ruleForm.code = null
      this.ruleForm.pass = null
      this.ruleForm.checkPass = null
      this.ruleForm.email = null
    }
  }
}
</script>

<style scoped>
.home {
  background: url("@/assets/login.jpg");
  background-size: cover;
  height: 100vh;
}

.el-input {
  font-size: 20px;
}

.el-form-item__error {
  font-size: 16px;
}

.login {
  display: flex;
  width: 400px;
  height: 400px;
  background-color: white;
  opacity: 0.7;
  justify-content: center;
  margin: auto;
  margin-top: 20%;
  text-align: center;

  .logins {
    width: 300px;
    justify-content: center;
  }
}

.zhuce {
  margin-top: 30px;
  z-index: 999;

  .el-button {
    margin-left: 15px;
  }
}

</style>

前后端登陆实现

vue邮箱验证码登陆: 实现邮箱验证码登陆、密码登陆、重置、注册 - Gitee.com

管华尔
关注
Vue项目二 登录注册功能的实现
qq_49375885的博客
06-15 2万+
Vue项目二注册登录功能的实现
Vue系列第四篇：Vue2 + Element开发登录页面
hsy12342611的专栏
07-24 1682
Vue2 + Element开发登录页面
springboot+vue实现发送邮箱验证码实现注册功能
qq_53521351的博客
09-06 1463
前几天做一个小项目需要实现springboot集成redis实现邮箱注册功能，当时参考了某位大佬的博客。来实现邮箱发送验证码的功能。这样后台功能就实现完成了。接下来就是写注册接口。
SpringBoot+mail+Vue+实现发送邮件验证码
qq_40300227的博客
03-20 5176
SpringBoot+mail+Vue+ElementUI+axios实现发送邮件验证码
vue 短信验证码(注册，登录，忘记密码)
qq_39870203的博客
04-06 608
password: [{ required: true, message: "请输入密码", trigger: "blur" }],{ required: true, message: "请输入短信验证码", trigger: "blur" },{ required: true, message: "请输入手机号", trigger: "blur" },<el-form-item label="短信验证码" prop="code">message: "手机号不能为空",//默认样式，防止快速点击好几次。
Vue+NodeJS+MongoDB实现邮箱验证注册、登录
最新发布
前端卷王小白的博客
09-06 2066
Vue+NodeJS+MongoDB实现邮箱验证注册、登录 . 密码加密,token验证,Cookie登录,数据库配置和连接.自动登录,用户信息存储到数据库
vue + element UI 如何实现邮箱验证并注册用户
iglvfy的博客
11-13 8138
学习内容： vue + element 实现邮箱验证并注册用户 接下来需要把邮箱输入框内的数据和验证码输入框内的数据绑定到data内，并绑定时间函数： <el-form ref="form" :model="form" label-width="60px" size="mini"> <el-form-item label="邮箱" class="em"> <el-input v-model="form.email"></el-i
vue网站后台登录注册和忘记密码切换页
07-13
在这个项目中，“vue网站后台登录注册和忘记密码切换页”指的是使用Vue.js实现的网站后台功能，包括用户登录、注册以及找回密码的页面。由于描述中提到“无后台”，我们可以理解为这是一个纯前端的模拟实现，不涉及...
django+vue3通过邮箱重置密码
weixin_62935305的博客
06-11 1751
通过邮箱重置密码流程 简单的发布邮件 配置异步进行发邮件 重置密码完整代码 vue3重置邮箱密码流程 vue3 具体代码及解析
vue 中实现页面刷新验证码不重置
weixin_43958085的博客
09-26 2550
平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在很多短信验证,或邮箱验证都是存在下面几个问题,例如短信验证时间为60s的时候(CSDN 存在), 1.当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按...
Vue实现简易邮箱输入验证
01-20
本文中的代码将使用自定义全局组件，emit派发以及正则来实现一个简易的邮箱输入验证功能，用以验证邮箱地址格式是否正确，如果正确则在输入框的后方同步显示true，如果错误则显示false。 邮箱地址我们规定为： 前缀是字母、数字或者下划线，并且长度在3位以上15位以下，后缀是小写字母构成，且长度为2位或者3位。 例如：ab@152.cn                false（前缀不在3位以上）            sbd1221@163.com     true   下面为代码，已含适量注释： {{mail}} Vue.component('cu
vue+SSM实现验证码功能
10-17
主要介绍了vue+SSM实现验证码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
基于vue实现图片验证码倒计时60s功能
10-15
在Vue.js框架中实现图片验证码倒计时60秒功能是一项常见的前端开发任务，它涉及到用户验证、用户体验以及页面交互等多个方面。以下将详细介绍如何在Vue项目中完成这个功能。 首先，我们需要创建一个HTML结构来展示...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）三：找回密码界面及对应功能实现
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
07-03 773
本章实现找回密码功能，包括短信验证码找回、邮箱验证码找回等功能，并通过node-send-email发送邮箱验证码，实现找回密码界面、接口等功能。
vue做一个有验证码的登陆页面和注册页面，敲回车登陆
热门推荐
大脸猫~
08-09 5万+
效果图： 样式问题： 背景页面UI给的尺寸比较小的情况下，如何按比例不平埔背景呢？ .login { width: 100%; padding-bottom: 62.5%; height: 0; background: url('../../images/login.jpg') no-repeat center center fixed; background-s...
Vue Mutui实现邮箱注册
私信可回答各种问题~
02-16 4186
Vue Mutui实现邮箱注册
Vue简易注册页面+发送验证码功能的实现
建桥之魂的博客
11-27 3万+
目录1. 效果展示2. 增强版验证码及邮件推送管理（见以后的博客）3. 大致思路4. 前期准备5. 前端代码6. 后端① 主要的依赖② 正则校验邮箱工具类③ Redis的set和get工具类④ 核心service层代码 1. 效果展示 2. 增强版验证码及邮件推送管理（见以后的博客） 3. 大致思路 用户角度分析一下注册时候的步骤： 填写自己的邮箱号 点击“发送验证码”按钮 邮箱中收到验证码 填写其余注册信息并填写验证码 注册成功！ 系统设计者角度分析一下步骤： 系统随机生成六位数 根据用户提
vue实现用户注册获取验证码及验证码校验功能（部分代码）
断肠人在刷牙〃的博客
08-21 2728
首先需要明确业务需求： 前端 需要对用户手机号码校验（手机号格式、手机号输入框是否为空） 需要对验证码校验（验证码输入格式、验证码输入框是否为空） 获取验证码按钮校验（控制验证码60s内不可重复提交、判断验证码是否和输入框中的值相同、验证码输入框是否为空） 根据不同返回结果给予不同的提示 手机号已绑定（别人已绑定） 手机号为当前用户已绑定 后端 集成发送短信验证码能力 随机生成六位数短信验证法 校验手机号是否已绑定 存储 一个简单的用户手机号绑定/注册的业务大致就是这些，接下来我们开始做。首先做前端
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值