購物商城系統設計與實現總結_註冊功能的實現

用戶點擊註冊按鈕會跳轉註冊界面，按照系統提示要求，填寫用戶名、密碼和一些非必填的個人信息以及驗證碼後，點擊註冊按鈕即可進行註冊。各輸入框中會有輸入提示，並且輸入框在失焦時就會立即進行判斷填寫內容是否符合提示要求。在輸入不符合要求時，有錯誤的對應輸入框下會顯示紅色提示信息，當輸入修改正確後信息會自動隱藏。

 

<template>
  <div id="Register">
    <div class="reg_box">
      <!-- logo區域 -->
      <div class="avatar_box">
        <img src="@/assets/imgs/logo.jpg" alt />
      </div>
      <!-- 註冊表單區域 -->
      <form class="reg_form">
        <table>
          <tr>
            <td><span>用戶名</span></td>
            <td>
              <input type="text" v-model="username" placeholder="請輸入用戶名" @blur="check_username" v-focus>
              <span class="error_tip" v-show="error_username">{{tip_username}}</span>
            </td>
          </tr>
          <tr>
            <td><span>密碼</span></td>
            <td>
              <input type="password" v-model="pwd1" placeholder="請輸入密碼" @blur="check_password(pwd1)">
              <span class="error_tip" v-show="error_password">{{tip_password}}</span>
            </td>
          </tr>
          <tr>
            <td><span>確認密碼</span></td>
            <td>
              <input type="password" v-model="pwd2" placeholder="請再次輸入密碼進行確認" @blur="check_confirm">
              <span class="error_tip" v-show="error_confirm">{{tip_confirm}}</span>
            </td>
          </tr>
          <tr>
            <td><span>姓名</span></td>
            <td>
              <input type="text" v-model="name" placeholder="請輸入真實姓名">
            </td>
          </tr>
          <tr>
            <td><span>聯繫方式</span></td>
            <td>
              <input type="text" v-model="phone" placeholder="請輸入電話或手機號碼">
            </td>
          </tr>
          <tr>
            <td><span>地址</span></td>
            <td><input type="text" v-model="place" placeholder="請輸入地址"></td>
          </tr>
          <tr>
            <td><span>郵箱</span></td>
            <td><input type="text" v-model="email" placeholder="請輸入Email"></td>
          </tr>
          <tr>
            <td><span>驗證碼</span></td>
            <td>
              <input type="text" v-model="code" placeholder="請輸入右圖所示驗證碼" id="code_input" @blur="check_code">
              <div class="pic_code" :style="{backgroundColor:gencode.bgColor,color:gencode.codeColor}" @click="generatedCode()">{{gencode.codeNumber}}</div>
              <span class="error_tip" v-show="error_code">{{tip_code}}</span>
            </td>
          </tr>
        </table>
      </form>
      <!-- 按鈕區 -->
      <div class="btns">
        <button @click="register">註冊</button>
        <button @click="resetRegForm">重置</button>
      </div>
    </div>
  </div>
</template>

<script>
import {addRegisterData} from '../../api/index'
// 混入屬性，驗證碼生成方法複用
import {genCodeMixin} from '@/assets/js/mixin'
export default {
  name: 'Register',
  // 混入對象
  mixins:[genCodeMixin],
  data() {
    return {
      username: '',
      password: '',
      name: '',
      phone: '',
      place: '',
      email: '',
      //提示標記
      error_username:false,
      error_password:false,
      error_confirm:false,
      //兩次密碼確認
      pwd1: '',
      pwd2: '',
      //錯誤提示信息
      tip_username:'',
      tip_password:'',
      tip_confirm:'',
    }
  },
  mounted() {
    //生成圖形驗證碼
    this.generatedCode()
  },
  methods: {
    //檢測密碼
    check_password(password) {
      let re = /^[a-zA-Z0-9]{8,20}$/;
      if(re.test(password)){
        this.error_password=false;
      }else {
        this.tip_password='注意：密碼必須由8-20個大小寫字母、數字組成';
        this.error_password=true;
      }
    },
    //檢測確認密碼
    check_confirm() {
      if(this.pwd2 != this.pwd1){
        this.error_confirm=true;
        this.tip_confirm='兩次輸入的密碼不一致'
      }else{
        this.error_confirm=false;
        //兩次一致才賦給用於提交的表單內
        this.password = this.pwd1
      }
    },
    // 提交註冊
    register() {
      if(this.error_username || this.error_password || this.error_confirm || this.error_code){
        alert('請將有誤信息修改正確後再提交')
      }else{
        addRegisterData({
          username:this.username,
          password:this.password,
          name:this.name,
          phone:this.phone,
          place:this.place,
          email:this.email
        })
        .then(res => {
          if(res.message == '註冊成功'){
            alert('註冊成功！')
            this.$router.push('/home/first')
          }else{
            alert('此用戶名已存在！')
          }
        })
        .catch(error => {
          alert('error')
        })
      }
    },
    //點擊重置按鈕,重置註冊表單
    resetRegForm() {
      this.username = ''
      this.pwd1 = ''
      this.pwd2 = ''
      this.name = ''
      this.phone = ''
      this.place = ''
      this.email = ''
      this.code = ''
    }
  }
}
</script>

<style scoped>
/* 驗證碼和按鈕樣式複用 */
@import '../../assets/css/loginRegis.css';
#Register {
  width: 100%;
  height: 800px;
  background-color: #ff8700;
}
.reg_box {
  width: 540px;
  height: 660px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%);
}
/* 註冊表單區域 */
.reg_form {
  left: 10px;
}
.reg_form table tr td:nth-child(1) span{
  height: 35px;
  display: block;
  text-align: right;
  padding-right: 15px;
  margin-bottom: 15px;
}
.reg_form table tr td:nth-child(2){
  height: 60px;
  vertical-align: top;
}
form input {
  height: 35px;
  width: 360px;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding-left: 15px;
}
</style>

 註冊界面的用戶名，密碼等輸入信息的格式是否符合系統規定要求，是通過對應的正則表達式來判斷的。如果信息有誤，會在對應輸入框下顯示紅色提示文字，提示用戶修改。在點擊註冊按鈕進行註冊時，系統會先判斷所填信息是否符合要求，都無誤後纔會提交。

註冊頁提供的驗證碼是基於Math.random()*n隨機生成數字，利用Ascii碼生成數字和字母，`rgb(${num1},${num2},${num3})`隨機生成字體和背景顏色，在點擊、刷新、輸入錯誤時都會自動更新。