快捷導(dǎo)航

Vue中v-form標(biāo)簽里的:rules作用及定義方法

更新時(shí)間：2025年03月22日 10:25:57 作者：fridayCodeFly

文章介紹了在Vue項(xiàng)目中使用ElementUI或ElementPlus組件庫時(shí),如何通過`el-form`標(biāo)簽的`:rules`屬性進(jìn)行表單驗(yàn)證,`:rules`屬性用于定義表單項(xiàng)的驗(yàn)證規(guī)則,包括必填項(xiàng)、格式校驗(yàn)、長度限制等,文章還展示了如何定義基本驗(yàn)證規(guī)則和自定義驗(yàn)證函數(shù),感興趣的朋友一起看看吧

作用

:rules 用于為表單中的表單項(xiàng)（el-form-item）定義驗(yàn)證規(guī)則。當(dāng)用戶在表單中輸入數(shù)據(jù)時(shí)，這些規(guī)則會(huì)對(duì)輸入內(nèi)容進(jìn)行校驗(yàn)，以確保數(shù)據(jù)的合法性和完整性。例如，可以驗(yàn)證輸入是否為空、是否符合特定的格式（如郵箱格式、電話號(hào)碼格式等），以及輸入的長度是否在規(guī)定范圍內(nèi)等。如果輸入不符合規(guī)則，會(huì)顯示相應(yīng)的錯(cuò)誤提示信息。

定義方法

1. 基本驗(yàn)證規(guī)則

以下是一個(gè)簡單的示例，展示了如何定義和使用 :rules 進(jìn)行表單驗(yàn)證

<template>
  <el-form :model="formData" :rules="rules" ref="formRef">
    <el-form-item label="用戶名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密碼" prop="password">
      <el-input v-model="formData.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref } from 'vue';
// 定義表單數(shù)據(jù)
const formData = ref({
  username: '',
  password: ''
});
// 定義表單驗(yàn)證規(guī)則
const rules = ref({
  username: [
    { required: true, message: '請輸入用戶名', trigger: 'blur' },
    { min: 3, max: 10, message: '用戶名長度在 3 到 10 個(gè)字符之間', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '請輸入密碼', trigger: 'blur' },
    { min: 6, max: 20, message: '密碼長度在 6 到 20 個(gè)字符之間', trigger: 'blur' }
  ]
});
// 定義表單引用
const formRef = ref(null);
// 提交表單方法
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表單驗(yàn)證通過，提交數(shù)據(jù):', formData.value);
    } else {
      console.log('表單驗(yàn)證失敗');
    }
  });
};
</script>

代碼解釋：
formData：存儲(chǔ)表單中的數(shù)據(jù)。
rules：定義了每個(gè)表單項(xiàng)的驗(yàn)證規(guī)則。每個(gè)規(guī)則是一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象代表一條驗(yàn)證規(guī)則。
required：表示該項(xiàng)是否為必填項(xiàng)。
message：當(dāng)驗(yàn)證不通過時(shí)顯示的錯(cuò)誤提示信息。
trigger：指定觸發(fā)驗(yàn)證的事件，常見的值有 blur（失去焦點(diǎn)時(shí)驗(yàn)證）和 change（值改變時(shí)驗(yàn)證）。
min 和 max：用于驗(yàn)證輸入的長度范圍。
prop：在 el-form-item 上使用 prop 屬性指定該表單項(xiàng)對(duì)應(yīng)的表單數(shù)據(jù)字段名，以便與 rules 中的規(guī)則對(duì)應(yīng)。
validate：調(diào)用 el-form 的 validate 方法進(jìn)行表單驗(yàn)證，驗(yàn)證結(jié)果通過回調(diào)函數(shù)返回。

2. 自定義驗(yàn)證規(guī)則

除了基本的驗(yàn)證規(guī)則，你還可以定義自定義的驗(yàn)證函數(shù)：

<template>
  <el-form :model="formData" :rules="rules" ref="formRef">
    <el-form-item label="郵箱" prop="email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref } from 'vue';
import { validateEmail } from './utils'; // 假設(shè)這是一個(gè)自定義的郵箱驗(yàn)證函數(shù)
const formData = ref({
  email: ''
});
const rules = ref({
  email: [
    { required: true, message: '請輸入郵箱', trigger: 'blur' },
    { validator: validateEmail, message: '請輸入有效的郵箱地址', trigger: 'blur' }
  ]
});
const formRef = ref(null);
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表單驗(yàn)證通過，提交數(shù)據(jù):', formData.value);
    } else {
      console.log('表單驗(yàn)證失敗');
    }
  });
};
</script>

代碼解釋：
validator：指定一個(gè)自定義的驗(yàn)證函數(shù)，該函數(shù)接收三個(gè)參數(shù)：rule（當(dāng)前的驗(yàn)證規(guī)則）、value（當(dāng)前表單項(xiàng)的值）和 callback（用于返回驗(yàn)證結(jié)果的回調(diào)函數(shù)）。在自定義驗(yàn)證函數(shù)中，你可以編寫復(fù)雜的驗(yàn)證邏輯，并通過 callback 函數(shù)返回驗(yàn)證結(jié)果。
通過以上方法，你可以靈活地定義和使用 :rules 進(jìn)行表單驗(yàn)證。在 Vue 項(xiàng)目中，如果你使用的是

到此這篇關(guān)于Vue中v-form標(biāo)簽里的:rules有什么作用。如何定義。的文章就介紹到這了,更多相關(guān)Vue v-form標(biāo)簽:rules內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: