validate?注冊頁的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解

更新時(shí)間：2022年09月30日 15:53:47 作者：風(fēng)無雨

這篇文章主要為大家介紹了validate?注冊頁的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.注冊頁是什么

當(dāng)我們使用一個(gè)從未使用過的網(wǎng)站時(shí),想要注冊賬號(hào),點(diǎn)擊注冊賬號(hào)時(shí)看到的網(wǎng)頁就是注冊頁注冊頁例子如下:

我們看到以下的注冊頁中,有兩大類信息:

第一大類是用戶信息類,

包括用戶名,密碼和email,他們都有自己的取值規(guī)則 ,例如用戶名顯示不得小于3個(gè)字符

第二大類是驗(yàn)證碼類,一般有兩種,

一種是短信或郵箱驗(yàn)證,這是為了綁定手機(jī)號(hào)或郵箱,

還有一種就下圖中的真人驗(yàn)證,為了避免機(jī)器人惡意訪問信息量過大,通過驗(yàn)證計(jì)算題或者識(shí)別字母的方式來確定是真人訪問

2.為什么需要注冊頁

目的:

注冊頁的目的是讓用戶注冊賬號(hào)
用戶通過賬號(hào)密碼來登錄網(wǎng)站
網(wǎng)站記錄用戶的賬戶密碼,建立一個(gè)記錄每一個(gè)用戶信息的數(shù)據(jù)庫

數(shù)據(jù)校驗(yàn)

用戶名和密碼都有一定的命名和設(shè)定規(guī)則
為了避免不符合規(guī)則的命名和密碼發(fā)送到服務(wù)器,造成服務(wù)器壓力過大
我們需要在前端頁面對(duì)數(shù)據(jù)進(jìn)行初篩,符合規(guī)則要求的才會(huì)被發(fā)送到服務(wù)器
服務(wù)器再進(jìn)行用戶名是否重復(fù)的校驗(yàn)

3.注冊頁如何實(shí)現(xiàn)

本次所使用的技術(shù)棧:vue2.0,axios,element-ui,vuex,vue-router
需要實(shí)現(xiàn)的界面如下:

3.1分析業(yè)務(wù)需求

1.獲取數(shù)據(jù): v-model雙向綁定三個(gè)數(shù)據(jù),分別是username.password,repassword
2.校驗(yàn)數(shù)據(jù)
(1)在data中添加校驗(yàn)規(guī)則
(2)在模板中配置規(guī)則
(3)處理最終結(jié)果
3.發(fā)送數(shù)據(jù): 通過axios發(fā)送數(shù)據(jù)
4.處理數(shù)據(jù): 判斷axios返回的code值,來處理數(shù)據(jù)

初始html模板如下

小貼士:

input框的前置icon圖標(biāo)通過prefix-icon="el-icon-user"實(shí)現(xiàn)

如果想要實(shí)現(xiàn)點(diǎn)擊小眼睛實(shí)現(xiàn)密碼顯示和保密.可以在el-input框便簽加上show-password實(shí)現(xiàn)

<!-- 注冊的表單區(qū)域 -->
  <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>
    <!-- 確認(rèn)密碼 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="請?jiān)俅未_認(rèn)密碼"></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獲取數(shù)據(jù) v-model雙向綁定

首先在data中定義表單數(shù)據(jù)對(duì)象,包含用戶名,密碼和第二次密碼

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

然后在表單的三個(gè)input框中使用v-model綁定上面的三個(gè)數(shù)據(jù)

 <!-- 注冊的表單區(qū)域 -->
      <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="請輸入再次確認(rèn)密碼"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

3.3校驗(yàn)數(shù)據(jù)

首先在data中定義數(shù)據(jù)校驗(yàn)規(guī)則

formRules: {
        username: [
          { required: true, message: "用戶名不能為空", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: "用戶名必須是1-10位的字母數(shù)字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密碼不能為空", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密碼必須是6-15位的非空字符",
            trigger: "blur",
          },
        ],
        repassword: [
          { required: true, message: "請?jiān)俅未_認(rèn)密碼", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密碼必須是6-15位的非空字符",
            trigger: "blur",
          },
          // 使用 validator 屬性，來應(yīng)用自定義的校驗(yàn)規(guī)則
          {
            validator: (rule, value, callback) => {
              // 形參中的 value 表示被綁定的元素的值
              if (value !== this.form.password) {
                // 校驗(yàn)失敗
                callback(new Error("兩次密碼不一致！"));
              } else {
                // 校驗(yàn)成功
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },

然后對(duì)html中的form部分標(biāo)簽中增加內(nèi)容

在el-form中:model綁定form,:rules綁定formRules,
在el-form-item中prop綁定form中的數(shù)據(jù),注意這里不需要寫form.username,只需要寫username

<!-- 注冊的表單區(qū)域 -->
      <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="請輸入再次確認(rèn)密碼"
            prefix-icon="el-icon-lock"
            v-model="form.repassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>

3.4method中的發(fā)送數(shù)據(jù)

首先給html中的注冊按鈕綁定一個(gè)點(diǎn)擊事件@click='doRegister'

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

然后在methods里定義事件doRegister:

通過$refs獲得表單的dom元素
使用validate對(duì)數(shù)據(jù)進(jìn)行校驗(yàn),如果成功發(fā)送ajax
這里使用了promise的語法糖async-await,來實(shí)現(xiàn)同步的寫法實(shí)現(xiàn)異步的效果

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

3.5處理數(shù)據(jù)

根據(jù)ajax返回的數(shù)據(jù)中的code來判斷,是注冊成功還是注冊失敗

(這里要通過后端提供的接口文檔來確定什么code是失敗,什么code是成功)
我這里code為0是成功,1是失敗

注冊成功跳轉(zhuǎn)登錄頁, this.$router.push("/login");通過路由實(shí)現(xiàn)
彈出成功信息框: this.$message.success(res.message);
錯(cuò)誤則彈出失敗信息框:this.$message.error(res.message)

     // 2.方法
  methods: {
    // 2.1注冊
    doRegister() {
      // (1).檢查表單時(shí)是否校驗(yàn)通過
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // (2).校驗(yàn)通過,發(fā)送ajax
          const { data: res } = await this.$axios.post("/api/reg", {
            ...this.form,
          });
          // (3).處理數(shù)據(jù)
          if (res.code === 0) {
            // 跳轉(zhuǎn)登錄頁
            this.$router.push("/login");
            // 彈出信息框
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
  },