validate 註冊頁的表單資料校驗實現詳解

2022-10-02 14:00:31

1.註冊頁是什麼

當我們使用一個從未使用過的網站時,想要註冊賬號,點選註冊賬號時看到的網頁就是註冊頁註冊頁例子如下:

我們看到以下的註冊頁中,有兩大類資訊:

第一大類是使用者資訊類,

包括使用者名稱,密碼和email,他們都有自己的取值規則 ,例如使用者名稱顯示不得小於3個字元

第二大類是驗證碼類,一般有兩種,

一種是簡訊或郵箱驗證,這是為了繫結手機號或郵箱,

還有一種就下圖中的真人驗證,為了避免機器人惡意存取資訊量過大,通過驗證計算題或者識別字母的方式來確定是真人存取

2.為什麼需要註冊頁

目的:

註冊頁的目的是讓使用者註冊賬號
使用者通過賬號密碼來登入網站
網站記錄使用者的賬戶密碼,建立一個記錄每一個使用者資訊的資料庫

資料校驗

使用者名稱和密碼都有一定的命名和設定規則
為了避免不符合規則的命名和密碼傳送到伺服器,造成伺服器壓力過大
我們需要在前端頁面對資料進行初篩,符合規則要求的才會被傳送到伺服器
伺服器再進行使用者名稱是否重複的校驗

3.註冊頁如何實現

本次所使用的技術棧:vue2.0,axios,element-ui,vuex,vue-router
需要實現的介面如下:

3.1分析業務需求

1.獲取資料: v-model雙向繫結三個資料,分別是username.password,repassword
2.校驗資料
(1)在data中新增校驗規則
(2)在模板中設定規則
(3)處理最終結果
3.傳送資料: 通過axios傳送資料
4.處理資料: 判斷axios返回的code值,來處理資料

初始html模板如下

小貼士:

input框的前置icon圖示通過prefix-icon="el-icon-user"實現

如果想要實現點選小眼睛實現密碼顯示和保密.可以在el-input框便籤加上show-password實現

<!-- 註冊的表單區域 -->
  <el-form>
    <!-- 使用者名稱 -->
    <el-form-item>
      <el-input placeholder="請輸入使用者名稱" prefix-icon="el-icon-user"></el-input>
    </el-form-item>
    <!-- 密碼 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="請輸入密碼"></el-input>
    </el-form-item>
    <!-- 確認密碼 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="請再次確認密碼"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="btn-reg">註冊</el-button>
      <el-link type="info" @click="$router.push('/login')">去登入</el-link>
    </el-form-item>
  </el-form>

3.2獲取資料 v-model雙向繫結

首先在data中定義表單資料物件,包含使用者名稱,密碼和第二次密碼

 data() {
    return {
      form: {
        username: "",
        password: "",
        repassword: "",
      },
      }

然後在表單的三個input框中使用v-model繫結上面的三個資料

 <!-- 註冊的表單區域 -->
      <el-form >
        <el-form-item >
          <el-input
            placeholder="請輸入使用者名稱"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="請輸入密碼"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            placeholder="請輸入再次確認密碼"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

3.3校驗資料

首先在data中定義資料校驗規則

formRules: {
        username: [
          { required: true, message: "使用者名稱不能為空", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: "使用者名稱必須是1-10位的字母數位",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密碼不能為空", trigger: "blur" },
          {
            pattern: /^S{6,15}$/,
            message: "密碼必須是6-15位的非空字元",
            trigger: "blur",
          },
        ],
        repassword: [
          { required: true, message: "請再次確認密碼", trigger: "blur" },
          {
            pattern: /^S{6,15}$/,
            message: "密碼必須是6-15位的非空字元",
            trigger: "blur",
          },
          // 使用 validator 屬性，來應用自定義的校驗規則
          {
            validator: (rule, value, callback) => {
              // 形參中的 value 表示被繫結的元素的值
              if (value !== this.form.password) {
                // 校驗失敗
                callback(new Error("兩次密碼不一致！"));
              } else {
                // 校驗成功
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },

然後對html中的form部分標籤中增加內容

在el-form中:model繫結form,:rules繫結formRules,
在el-form-item中prop繫結form中的資料,注意這裡不需要寫form.username,只需要寫username

<!-- 註冊的表單區域 -->
      <el-form :model="form" :rules="formRules" ref="formRef">
        <el-form-item prop="username">
          <el-input
            placeholder="請輸入使用者名稱"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="請輸入密碼"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="請輸入再次確認密碼"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

3.4method中的傳送資料

首先給html中的註冊按鈕繫結一個點選事件@click='doRegister'

<el-button type="primary" style="width: 100%" @click="doRegister">註冊</el-button>

然後在methods裡定義事件doRegister:

通過$refs獲得表單的dom元素
使用validate對資料進行校驗,如果成功傳送ajax
這裡使用了promise的語法糖async-await,來實現同步的寫法實現非同步的效果

// 2.方法
  methods: {
    // 2.1註冊
    doRegister() {
      // (1).檢查表單時是否校驗通過
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // (2).校驗通過,傳送ajax
          const { data: res } = await this.$axios.post("/api/reg", {
            ...this.form,
          });
        }
      });
    },
  },

3.5處理資料

根據ajax返回的資料中的code來判斷,是註冊成功還是註冊失敗

(這裡要通過後端提供的介面檔案來確定什麼code是失敗,什麼code是成功)
我這裡code為0是成功,1是失敗

註冊成功跳轉登入頁, this.$router.push("/login");通過路由實現
彈出成功資訊框: this.$message.success(res.message);
錯誤則彈出失敗資訊框:this.$message.error(res.message)

     // 2.方法
  methods: {
    // 2.1註冊
    doRegister() {
      // (1).檢查表單時是否校驗通過
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // (2).校驗通過,傳送ajax
          const { data: res } = await this.$axios.post("/api/reg", {
            ...this.form,
          });
          // (3).處理資料
          if (res.code === 0) {
            // 跳轉登入頁
            this.$router.push("/login");
            // 彈出資訊框
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
  },