Vue中v-form標簽里的:rules作用及定義方法

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

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

作用

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

定義方法

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

以下是一個簡單的示例，展示了如何定義和使用 :rules 進行表單驗證

<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: ''
});
// 定義表單驗證規(guī)則
const rules = ref({
  username: [
    { required: true, message: '請輸入用戶名', trigger: 'blur' },
    { min: 3, max: 10, message: '用戶名長度在 3 到 10 個字符之間', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '請輸入密碼', trigger: 'blur' },
    { min: 6, max: 20, message: '密碼長度在 6 到 20 個字符之間', trigger: 'blur' }
  ]
});
// 定義表單引用
const formRef = ref(null);
// 提交表單方法
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表單驗證通過，提交數(shù)據(jù):', formData.value);
    } else {
      console.log('表單驗證失敗');
    }
  });
};
</script>

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

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

除了基本的驗證規(guī)則，你還可以定義自定義的驗證函數(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ù)
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('表單驗證通過，提交數(shù)據(jù):', formData.value);
    } else {
      console.log('表單驗證失敗');
    }
  });
};
</script>

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

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

您可能感興趣的文章: