Vue3實現(xiàn)登錄表單驗證功能

更新時間：2022年06月23日 15:09:00 作者：～前端小攻城獅

這篇文章主要介紹了Vue3實現(xiàn)登錄表單驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一.實現(xiàn)思路與效果圖

使用async-validator 插件，阿里出品的 antd 和 ElementUI 組件庫中表單校驗?zāi)J(rèn)使用的 async-validator。

效果圖：

二.實現(xiàn)具體過程

npm i async-validator -S

綁定loginForm

const loginForm = reactive({
  username: "",
  password: "",
});

初始化檢驗規(guī)則和錯誤提示

// 校驗規(guī)則
const descriptor = reactive({
  username: {
    required: true,
    message: "賬號不能為空",
  },
  password: [
  // 多條校驗規(guī)則
    {
      required: true,
      message: "密碼不能為空",
    },
    {
      validator(rule, value, callback) {
        value < 12 ? callback(new Error("不能少于12位")) : callback();
      },
    },
  ],
});

created里實例化構(gòu)造函數(shù)表示創(chuàng)建一個校驗器，參數(shù)為校驗規(guī)則對象

const validator = reactive(new Schema(descriptor));

定義提交的方法

   const submit = () => {
            this.clearMessage()
            validator.validate(this.form, {
                firstFields: true
            }).then(() => {
                // 校驗通過
                console.log('ok')
            }).catch(({ errors }) => {
                // 校驗未通過
                // 顯示錯誤信息
                for (let { field, message } of errors)                  
                this.errorMessage[field] = message
            })
        },

clearMessage // 清空校驗錯誤提示

const clearMessage = () => {
  for (let key in errorMessage) {
    errorMessage[key] = "";
  }
};

validate方法

驗證器對象的validate方法用于驗證數(shù)據(jù)是否符合驗證規(guī)則。

如驗證一個空對象，是否符合驗證規(guī)則

function(source, [options], callback): Promise

參數(shù)：

source 要驗證的對象（必選)
[options] 驗證處理選項對象（可選）
callback 驗證完成時調(diào)用的回調(diào)函數(shù)（可選）

options的配置

{
  suppressWarning: false, // 是否禁止無效值的內(nèi)部警告
  first: false, // 是否在第一個規(guī)則驗證錯誤時調(diào)用回調(diào)，不再處理其他驗證規(guī)則
  firstFields: true // 是否在指定字段的第一個規(guī)則驗證錯誤時調(diào)用回調(diào)，不再處理相同字段的驗證規(guī)則，true代表所有字段
}

返回值：
validate方法返回一個promise對象,可以用then方法和catch方法綁定成功或失敗的處理

validator.validate({})
  .then(() => {
    console.log('驗證通過')
  })
  .catch(({ errors, fields }) => {
  console.log('驗證不通過', errors, fields)
})

使用v-bind控制輸入框紅色的顯隱藏 :class="{ checkusername: isActiveUsername }"如果為空則顯示紅色

三.完整代碼與效果圖

完整代碼

<template>
  <div class="main">
    <h3>Vue3表單驗證</h3>

    <div class="form-box">
      <div class="form-group">
        <label class="label">賬號</label>
        <input
         :class="{ checkusername: isActiveUsername }"
          type="text"
          v-model="loginForm.username"
          class="input"
          placeholder="請輸入賬號"
        />
        <span class="check-message">{{ errorMessage.username }}</span>
      </div>
      <div class="form-group">
        <label class="label">密碼</label>
        <input
          :class="{ checkpassword: isActivePassword }"
          tyep="password"
          v-model="loginForm.password"
          type="text"
          placeholder="請輸入密碼"
          class="input"
        />
        <span class="check-message">{{ errorMessage.password }}</span>
      </div>

      <div class="form-group">
        <button class="btn" @click="submit()">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import Schema from "async-validator";
import { reactive,ref } from "vue";
//控制輸入框變紅
const isActiveUsername = ref(false)
const isActivePassword = ref(false)
// 表單對象
const loginForm = reactive({
  username: "",
  password: "",
});
// 校驗規(guī)則
const descriptor = reactive({
  username: {
    required: true,
    message: "姓名不能為空",
  },
  password: [
    {
      required: true,
      message: "密碼不能為空",
    },
  ],
});
// 錯誤提示
const errorMessage = reactive({
  username: "",
  password: "",
});
const validator = reactive(new Schema(descriptor));
const submit = () => {
   if (loginForm.username === '') {
    isActiveUsername.value = true
  }
  if (loginForm.password === '') {
    isActivePassword.value = true
  }
  if (loginForm.username != '') {
    isActiveUsername.value = false
  }
  if (loginForm.password != '') {
    isActivePassword.value = false
  }
  clearMessage();
  validator
    .validate(loginForm, {
      firstFields: true,
    })
    .then(() => {
      // 校驗通過
      console.log(" 校驗通過,可以發(fā)起請求");
    })
    .catch(({ errors }) => {
      // 校驗未通過
      // 顯示錯誤信息
      for (let { field, message } of errors) errorMessage[field] = message;
    });
};
// 清空校驗錯誤提示
const clearMessage = () => {
  for (let key in errorMessage) {
    errorMessage[key] = "";
  }
};
</script>

<style scoped>
.main {
  text-align: center;
}
.btn {
  margin: 0;
  line-height: 1;
  padding: 15px;
  height: 30px;
  width: 60px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #2080f0;
  white-space: nowrap;
  outline: none;
  position: relative;
  border: none;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.form-box {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 5px solid rgb(171 174 186);
}
.form-group {
  height: 30px;
  margin: 10px;
  padding: 10px 15px 10px 0;
}
.label {
  padding-right: 10px;
  padding-left: 10px;
  display: inline-block;
  box-sizing: border-box;
  width: 110px;
  text-align: right;
}

.input {
  width: calc(100% - 120px);
  height: 28px;
}
.check-message {
  color: #d03050;
  position: relative;
  left: -70px;
}
.checkpassword,
.checkusername {
  border: 2px solid #d03050 !important ;
}
</style>

參考鏈接：

https://github.com/tmpfs/async-validate

https://www.cnblogs.com/wozho/p/10955525.html

到此這篇關(guān)于Vue3實現(xiàn)登錄表單驗證的文章就介紹到這了,更多相關(guān)vue3表單驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: