快捷導(dǎo)航

Vue Form表單的使用方法(rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)鍵盤按鍵監(jiān)聽)

更新時間：2024年11月22日 09:42:00 作者：張雨zy

本文介紹了在Vue.js中使用表單校驗(yàn)規(guī)則（rules）進(jìn)行網(wǎng)絡(luò)請求校驗(yàn)的方法,以及如何通過formRef引用表單對象并進(jìn)行鍵盤按鍵監(jiān)聽,感興趣的朋友跟隨小編一起看看吧

Form表單

rules格式校驗(yàn)

可以在validator中進(jìn)行網(wǎng)絡(luò)請求，實(shí)現(xiàn)網(wǎng)絡(luò)校驗(yàn)

const formRules = {
  userName: [{required: true, message: "用戶名不能為空", trigger: 'blur'}, {
    min: 5,
    max: 10,
    message: "長度必須5-10位",
    trigger: 'blur'
  }],
  passWord: [{required: true, message: "密碼不能為空", trigger: 'blur'}],
  reference: [{
    validator: referenceValidity,
    required: true,
    trigger: "blur",
  },],
}
function referenceValidity(rule, value, callback) {
  console.log('校驗(yàn)推薦人')
  if (value === "" || value === undefined) {
    callback(new Error("請輸入推薦人姓名"));
  } else {
    //請求網(wǎng)絡(luò)校驗(yàn)推廣人
    // console.log("輸入的推薦人姓名：" + value)
    // const _url = "xxxxxxxxxxx";
    // let param = {};
    // param.promotionPecialistName = value;
    // get(this.$http, _url, param).then(function (response) {
    //   let res = response.data;
    //   if (res.code === "I000000") {
    //     if (res.data.isFlag) {
    //       callback()
    //     } else {
    //       callback(new Error("推薦人不存在"))
    //     }
    //   } else {
    //     callback(new Error("推薦人不存在"))
    //   }
    // });
    callback(new Error("推薦人不存在"))
  }
}

formRef引用form對象 form表單中關(guān)聯(lián)formRef（引用對象），form（表單內(nèi)容），formRules（校驗(yàn)規(guī)則）

<el-form ref="formRef" :model="form" :rules="formRules">

const formRef = ref()
function reqLogin() {
  console.log("賬號信息", form.value)
  formRef.value.validate((valid) => {
    console.log("formRef valid = ", valid)
    if (valid) {
      setToken()
      store.commit("setUserInfo", form.value)
      showToast("登錄成功")
      router.push('/')
    }
  })
}

鍵盤監(jiān)聽

onMounted(() => {
  console.log("頁面加載")
  document.addEventListener('keyup', onkeyup)
})
onBeforeUnmount(() => {
  document.removeEventListener('keyup', onkeyup)
})
function onkeyup(e) {
  if (e.key === 'Enter') {
    reqLogin()
  }
}

完整代碼

<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import {Lock, User} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {setToken} from "../utils/CookieUtil.js";
import {showToast} from "../utils/ToastUtil.js";
import {useStore} from "vuex";
const router = useRouter()
const store = useStore()
const form = ref({
  userName: "",
  passWord: "",
  reference: ""
})
const formRef = ref()
const formRules = {
  userName: [{required: true, message: "用戶名不能為空", trigger: 'blur'}, {
    min: 5,
    max: 10,
    message: "長度必須5-10位",
    trigger: 'blur'
  }],
  passWord: [{required: true, message: "密碼不能為空", trigger: 'blur'}],
  reference: [{
    validator: referenceValidity,
    required: true,
    trigger: "blur",
  },],
}
function referenceValidity(rule, value, callback) {
  console.log('校驗(yàn)推薦人')
  if (value === "" || value === undefined) {
    callback(new Error("請輸入推薦人姓名"));
  } else {
    //請求網(wǎng)絡(luò)校驗(yàn)推廣人
    // console.log("輸入的推薦人姓名：" + value)
    // const _url = "xxxxxxxxxxx";
    // let param = {};
    // param.promotionPecialistName = value;
    // get(this.$http, _url, param).then(function (response) {
    //   let res = response.data;
    //   if (res.code === "I000000") {
    //     if (res.data.isFlag) {
    //       callback()
    //     } else {
    //       callback(new Error("推薦人不存在"))
    //     }
    //   } else {
    //     callback(new Error("推薦人不存在"))
    //   }
    // });
    callback(new Error("推薦人不存在"))
  }
}
function onkeyup(e) {
  if (e.key === 'Enter') {
    reqLogin()
  }
}
onMounted(() => {
  console.log("頁面加載")
  document.addEventListener('keyup', onkeyup)
})
onBeforeUnmount(() => {
  document.removeEventListener('keyup', onkeyup)
})
function reqLogin() {
  console.log("賬號信息", form.value)
  formRef.value.validate((valid) => {
    console.log("formRef valid = ", valid)
    if (valid) {
      setToken()
      store.commit("setUserInfo", form.value)
      showToast("登錄成功")
      router.push('/')
    }
  })
}
</script>
<template>
  <div style="height: 100vh;width: 100vw;display: flex;flex-direction: row">
    <div class="flex-col-center" style="width: 70%;height: 100%;background: #213547;">
      <span style="font-size: 40px;color: white;">測試系統(tǒng)登錄頁面</span>
      <span style="font-size: 20px;color: white;">演示Demo</span>
    </div>
    <div class="flex-col-center" style="width: 30%;padding: 100px">
      <h2 style="font-size: 20px">歡迎回來</h2>
      <el-form ref="formRef" :model="form" :rules="formRules">
        <el-form-item label="賬號" prop="userName">
          <el-input v-model="form.userName" placeholder="請輸入賬號">
            <template #prefix>
              <el-icon>
                <User/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密碼" prop="passWord">
          <el-input v-model="form.passWord" placeholder="請輸入密碼" show-password type="password">
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="推薦人" prop="reference">
          <el-input v-model="form.reference" placeholder="請輸入推薦人"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="reqLogin()">登錄</el-button>
    </div>
  </div>
</template>
<style scoped>
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center
}
</style>

到此這篇關(guān)于Vue Form表單的使用，rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)，鍵盤按鍵監(jiān)聽的文章就介紹到這了,更多相關(guān)Vue Form表單rules格式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: