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-20个字符" maxlength="20" class="login-card__item"  autofocus></el-input>
      <el-input ref="username" v-model="username" placeholder="请输入用户名, 只允许英文数字字符, 长度为4-16个字符" maxlength="16" class="login-card__item"></el-input>
      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码, 只允许英文和数字, 长度为8-30个字符" minlength="8" maxlength="30" class="login-card__item"></el-input>
      <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" minlength="8" maxlength="30" 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>

export default {
  name: 'register',
  layout: 'blank',
  data () {
    return {
      name: '',
      username: '',
      phone: '',
      password: '',
      identifyCode: '',
      passwordConfirm: '',
      buttonText: '获取验证码',
      disabled: false,
      loading: false,
      email: ''
    }
  },
  watch: {
    username: function () {
      this.username = this.username.replace(/[\u4E00-\u9FA5]/ig, '')
    }
  },
  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
      const 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 > 20) {
        this.$message({
          showClose: true,
          message: '昵称过长',
          type: 'error'
        })
        this.$refs.name.focus()
        return false
      }

      if (this.username.length === 0) {
        this.$message({
          showClose: true,
          message: '用户名不得为空',
          type: 'error'
        })
        return false
      }

      if (this.username.length < 4) {
        this.$message({
          showClose: true,
          message: '用户名过短',
          type: 'error'
        })
        this.$refs.username.focus()
        return false
      }

      if (this.username.length > 16) {
        this.$message({
          showClose: true,
          message: '用户名过长',
          type: 'error'
        })
        this.$refs.username.focus()
        return false
      }

      if (this.password.length < 8) {
        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 > 30) {
        this.$message({
          showClose: true,
          message: '密码过长',
          type: 'error'
        })
        this.$refs.password.focus()
        return false
      }
      if (!/^[0-9A-Za-z]{8,30}$/.test(this.password)) {
        this.$message({
          showClose: true,
          message: '密码只能包括大小写字母与数字',
          type: 'error'
        })
      }

      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

      const isValid = this.checkValid()

      if (!isValid) {
        this.loading = false
        return
      }

      this.$api.$post('/user/register', {
        phone: this.phone,
        password: this.password,
        name: this.name,
        username: this.username,
        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>