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

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

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

1.注冊(cè)頁(yè)是什么

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

我們看到以下的注冊(cè)頁(yè)中,有兩大類信息:

第一大類是用戶信息類,

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

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

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

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

2.為什么需要注冊(cè)頁(yè)

目的:

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

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

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

3.注冊(cè)頁(yè)如何實(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ù): 通過(guò)axios發(fā)送數(shù)據(jù)
4.處理數(shù)據(jù): 判斷axios返回的code值,來(lái)處理數(shù)據(jù)

初始html模板如下

小貼士:

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

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

<!-- 注冊(cè)的表單區(qū)域 -->
  <el-form>
    <!-- 用戶名 -->
    <el-form-item>
      <el-input placeholder="請(qǐng)輸入用戶名" prefix-icon="el-icon-user"></el-input>
    </el-form-item>
    <!-- 密碼 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="請(qǐng)輸入密碼"></el-input>
    </el-form-item>
    <!-- 確認(rèn)密碼 -->
    <el-form-item>
      <el-input type="password" prefix-icon="el-icon-lock" placeholder="請(qǐng)?jiān)俅未_認(rèn)密碼"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="btn-reg">注冊(cè)</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ù)

 <!-- 注冊(cè)的表單區(qū)域 -->
      <el-form >
        <el-form-item >
          <el-input
            placeholder="請(qǐng)輸入用戶名"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="請(qǐng)輸入密碼"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            placeholder="請(qǐng)輸入再次確認(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: "請(qǐng)?jiān)俅未_認(rèn)密碼", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密碼必須是6-15位的非空字符",
            trigger: "blur",
          },
          // 使用 validator 屬性，來(lái)應(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ù),注意這里不需要寫(xiě)form.username,只需要寫(xiě)username

<!-- 注冊(cè)的表單區(qū)域 -->
      <el-form :model="form" :rules="formRules" ref="formRef">
        <el-form-item prop="username">
          <el-input
            placeholder="請(qǐng)輸入用戶名"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="請(qǐng)輸入密碼"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="請(qǐng)輸入再次確認(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中的注冊(cè)按鈕綁定一個(gè)點(diǎn)擊事件@click='doRegister'

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

然后在methods里定義事件doRegister:

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

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

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

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

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

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

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

4總結(jié)

業(yè)務(wù)思路

1.獲取數(shù)據(jù)

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

3.發(fā)送請(qǐng)求

4.處理響應(yīng)數(shù)據(jù)

以上就是validate 注冊(cè)頁(yè)的表單數(shù)據(jù)校驗(yàn)實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于validate 注冊(cè)頁(yè)表單數(shù)據(jù)校驗(yàn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: