validate 註冊頁的表單數據校驗實現詳解

Posted on by

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);
          }
        }
      });
    },
  },

4總結

業務思路

1.獲取數據

2.校驗數據

3.發送請求

4.處理響應數據

以上就是validate 註冊頁的表單數據校驗實現詳解的詳細內容，更多關於validate 註冊頁表單數據校驗的資料請關註WalkonNet其它相關文章！

推薦閱讀：