Vue表單元件el-form校驗規則rules屬性

前言

文章如果有錯誤或者不規範的地方請指出來，一起加油，感謝大家觀看！！！

一、基本用法

rules是一個物件，其中每個鍵對應表單中的一個欄位名，值是一個數組，陣列中的每個元素代表對該欄位的一個校驗規則。

二、校驗規則

• required：表示該欄位是否必填。如果設定為true，當該欄位為空時會觸發相應的錯誤提示。

• pattern：使用正規表示式進行格式校驗。例如，對郵箱地址的校驗使用了正規表示式來確保輸入的是正確的郵箱格式。

• message：當校驗不透過時顯示的錯誤提示資訊。

• trigger：指定觸發校驗的時機，可以是'blur'（失去焦點）、'change'（值改變）等。

• type: 指定校驗的資料型別，如 'string'、'number'、'email'、'url' 等。

• min 和 max: 指定字串長度或數值的範圍，只在 type 為 'string' 或 'number' 時有效。

• 自定義校驗函式: 可以透過 validator 屬性定義一個自定義的校驗函式。

三、示例程式碼

<template>
  <el-form :model="formData" :rules="rules">
    <el-form-item label="使用者名稱" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="郵箱" prop="email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const formData = ref({
      username: '',
      email: ''
    });

    const rules = {
      username: [
        { required: true, message: '請輸入使用者名稱', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
        { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$/, message: '請輸入正確的郵箱地址', trigger: 'blur' }
      ]
    };

    const submitForm = () => {
      // 表單校驗
      formRef.value.validate((valid) => {
        if (valid) {
          // 表單驗證透過，執行提交邏輯
          console.log('表單驗證透過，提交資料：', formData.value);
        } else {
          console.log('表單驗證不透過');
        }
      });
    };

    return {
      formData,
      rules,
      submitForm
    };
  }
};
</script>

• 當該欄位為空時，在指定的觸發時機（如trigger: 'blur'失去焦點時）會觸發錯誤提示 “請輸入使用者名稱”。

• 使用正規表示式對郵箱地址進行校驗。只有當輸入的內容符合正規表示式的格式要求時，才認為是有效的郵箱地址。如果不符合，在觸發時機時會顯示 “請輸入正確的郵箱地址” 的錯誤提示。

四、動態校驗規則

可以根據表單中的其他欄位的值或者特定的條件動態地設定校驗規則。

const rules = {
    password: [
        { required: true, message: '密碼不能為空', trigger: 'blur' },
        { min: 6, max: 10, message: '密碼長度應在6到10個字元之間', trigger: 'blur' },
    ],
    confirmPassword: [
      { required: true, message: '請再次輸入密碼', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value === formData.value.password) {
            callback();
          } else {
            callback(new Error('兩次輸入的密碼不一致'));
          }
        },
        trigger: 'blur'
      }
    ]
};

在這個例子中，有兩個欄位的校驗

• 密碼不能為空，長度應在6到10個字元

• 自定義校驗函式用於驗證 “確認密碼” 欄位與 “密碼” 欄位的值是否一致。如果一致，呼叫callback()表示校驗透過；如果不一致，呼叫callback(new Error('兩次輸入的密碼不一致'))返回錯誤資訊。