SEEC-Portal-Front/pages/register.vue

<template>
  <div class="page-container login-container">
    <el-card class="login-card">
      <h2 class="login-card__title login-card__item">注 册</h2>
      <el-input ref="name" v-model="name" placeholder="请输入昵称, 长度为1-10个字符" maxlength="10" class="login-card__item" oninput="this.value=this.value.replace(/[^\w_]/g,'');" autofocus></el-input>
      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码, 长度为6-20个字符" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="email" v-model="email" placeholder="请输入邮箱" maxlength="320" class="login-card__item" autofocus></el-input>
      <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
      <el-input ref="identifyCode" v-model="identifyCode" placeholder="请输入验证码" maxlength="6" class="login-card__short-item"></el-input>
      <el-button :disabled="disabled" @click="sendMessage" class="login-card__right-button">{{buttonText}}</el-button>
      <el-button type="primary" class="login-card__item" @click="register" :loading="loading" round>注 册</el-button>
      <div class="login-card__bottom"><router-link to="/login" class="login-card__link">已有账号？前往登录</router-link></div>
    </el-card>
    <div class="clear"></div>
    <router-link to="/"><img src="/image/seec-logo--horizontal.png" class="login-card__logo"/></router-link>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: "register",
    layout: "blank",
    data(){
      return{
        name: '',
        phone: '',
        password: '',
        identifyCode: '',
        passwordConfirm: '',
        buttonText: '获取验证码',
        disabled: false,
        loading: false,
        email: ''
      }
    },
    methods: {
      sendMessage(){
        if(this.phone.length < 11){
          if(this.phone.length === 0){
            this.$message({
              showClose: true,
              message: '请填写手机号码',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '手机号码格式有误',
              type: 'error'
            });
          }
          this.$refs.phone.focus();
          return;
        }
        this.disabled = true;
        let time=60;
        let myScroll = setInterval(() => {
          time--;
          if(time>=0) {
            this.buttonText = time + "s后可重发";
          }else{
            this.buttonText = '获取验证码';
            this.disabled = false;  //倒计时结束能够重新点击发送的按钮
            clearTimeout(myScroll);    //清除定时器
            time = 60;   //设置循环重新开始条件
          }
        }, 1000);
        this.$api.post("/user/sendMessage", {"phone":this.phone}).then(res => {
          if(res.data.code === 0){
            this.$message({
              showClose: true,
              message: '发送成功',
              type: 'success'
            });
          }else{
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            });
          }
        });
      },
      checkValid(){
        if(this.name.length === 0){
          this.$message({
            showClose: true,
            message: '昵称不得为空',
            type: 'error'
          });
          this.$refs.name.focus();
          return false;
        }
        if(this.name.length > 10){
          this.$message({
            showClose: true,
            message: '昵称过长',
            type: 'error'
          });
          this.$refs.name.focus();
          return false;
        }

        if(this.password.length < 6){
          if(this.password.length === 0){
            this.$message({
              showClose: true,
              message: '密码不得为空',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '密码长度不足',
              type: 'error'
            });
          }
          this.$refs.password.focus();
          return false;
        }
        if(this.password.length > 20){
          this.$message({
            showClose: true,
            message: '密码过长',
            type: 'error'
          });
          this.$refs.password.focus();
          return false;
        }

        if(this.passwordConfirm !== this.password){
          this.$message({
            showClose: true,
            message: '密码前后不一致',
            type: 'error'
          });
          this.$refs.passwordConfirm.focus();
          return false;
        }

        if(this.email.length === 0){
          this.$message({
            showClose: true,
            message: '邮箱不得为空',
            type: 'error'
          });
          this.$refs.email.focus();
          return false;
        }
        if(this.email.length > 255){
          this.$message({
            showClose: true,
            message: '邮箱过长',
            type: 'error'
          });
          this.$refs.email.focus();
          return false;
        }

        const myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

        if(!myReg.test(this.email)){
          this.$message({
            showClose: true,
            message: '邮箱格式有误',
            type: 'error'
          });
          this.$refs.email.focus();
          return false;
        }

        if(this.phone.length !== 11){
          if(this.phone.length === 0){
            this.$message({
              showClose: true,
              message: '手机号码不得为空',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '手机号码格式有误',
              type: 'error'
            });
          }

          this.$refs.phone.focus();
          return false;
        }

        if(this.identifyCode.length === 0){
          this.$message({
            showClose: true,
            message: '未填写验证码',
            type: 'error'
          });
          this.$refs.identifyCode.focus();
          return false;
        }
        if(this.identifyCode.length !== 6){
          this.$message({
            showClose: true,
            message: '验证码长度错误',
            type: 'error'
          });
          this.$refs.identifyCode.focus();
          return false;
        }

        return true;

      },
      register() {
        this.loading = true;

        let isValid = this.checkValid();

        if(!isValid){
          return;
        }

        this.$api.$post('/user/register', {
          phone: this.phone,
          password: this.password,
          name: this.name,
          email: this.email,
          identifyCode: this.identifyCode
        }).then((res) =>
          {
            if(res.code === 0){
              this.$message({
                showClose: true,
                message: "注册成功，前往登录",
                type: 'success'
              });
              this.$router.push('/login');
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }

          }
        );
        this.loading = false;
      },
    }
  };
</script>

<style lang="scss" scoped>
  @import '~/assets/css/login.scss';
</style>