表單驗證和props

「這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰」

表單驗證詳解

<template>
  <a-button type="primary" @click="showHnader">
      顯示
  </a-button>

  <a-form
    ref="formRef"
    :model="formState.youForm"
    :rules="rules"
    :labelCol="{ style: 'width: 100px' }"
    v-if="flag"
  >
    <a-form-item ref="youNaNe" label="姓名" name="youNaNe">
      <a-input  
          placeholder="請選擇"
          v-model:value="formState.youForm.youNaNe"
          style="width:270px
      " />
    </a-form-item>

    <a-form-item label="學校" name="useSlectValue">
      <a-select  placeholder="請選擇"  style="width:270px"
         v-model:value="formState.youForm.useSlectValue">
            <a-select-option :value="item.code" 
                v-for="(item,index) in formState.backDataSchool"
                :key="index">
                  {{ item.name }}
            </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="日期" required name="date1">
      <a-date-picker
        style="width:270px"
        v-model:value="formState.youForm.date1"
        show-time
        format="YYYY-MM-DD"
        type="date"
        valueFormat="YYYY-MM-DD"
        placeholder="請選擇"
      />
    </a-form-item>

    <a-form-item label="愛好" name="type" >
      <a-checkbox-group v-model:value="formState.youForm.type">
        <a-checkbox :value="item.code" :name="item.name"
        v-for="(item,index) in formState.likeBackArr"
        :key="index"
        >{{ item.name  }}</a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 1 }">
      <a-button type="primary" @click="onSubmit">
          提交
      </a-button>
      
      <a-button style="margin-left: 10px" @click="resetForm">
         清空驗證規則及數據
      </a-button>
      
      <a-button style="margin-left: 10px" @click="removeResult">
         移除表單項的校驗結果
      </a-button>
    </a-form-item>

  </a-form>
</template>
複製代碼

<script lang="ts">
import { defineComponent, reactive, ref, toRaw, nextTick } from 'vue';
export default defineComponent({
  setup() {
    const formRef = ref();
    const flag=ref(false)
    const formState= reactive({
       youForm:{
          youNaNe:'',
          useSlectValue: undefined,
          date1: undefined,
          delivery: false,
          type: [],
        },
        backDataSchool:[
          {
            name:'第一小學',code:'001'
          },
          {
            name:'第二小學',code:'002'
          },
        ],
        likeBackArr:[
          {name:'睡覺',code:'1'},
          {name:'吃飯',code:'2'},
          {name:'吃飯',code:'3'},
        ]
    });
    const rules = {
      youNaNe: [
        { 
            required: true,
            message: '請輸入姓名', 
            trigger: 'blur' 
        },
      ],

      useSlectValue: [
          { 
              required: true, 
              message: '請選擇學校',
              trigger: 'change'
          }
      ],

      date1: [
       {  required: true, 
         message: '請選擇日期',
         trigger: 'change', 
        }
    ],
              
      type: [
        {
          type: 'array',
          required: true,
          message: '請選擇',
          trigger: 'change',
        },
      ],

    };
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          console.log('values', formState, toRaw(formState));
        })
        .catch((err:any) => {
          console.log('err')
        });
    };
    const resetForm = () => {
      // 移除規則和重置data中的數據
      formRef.value.resetFields();
    };

    const removeResult=()=>{
       // 移除表單項的校驗結果。
      formRef.value.clearValidate();
    }

    const showHnader=()=>{
      flag.value=true;
      nextTick(()=>{
        formRef.value.clearValidate();
      })
    }
    return {
      formRef,
      formState,
      rules,
      flag,
      removeResult,
      onSubmit,
      resetForm,
      showHnader
    };
  },
});
</script>
複製代碼

注意點

<!-- 第一個坑
:model="formState.youForm" 必定要寫成這樣
不要寫成:model="formState"
  -->
  
 第二個坑
 // date1: [{ required: true, 
     message: '請選擇日期', 
     trigger: 'change',
     type: 'object'
     }
 ],
 
// 若是 type: 'object'，須要注意的是你須要定義一個接口

第三個須要注意的點
format="YYYY-MM-DD" type="date"
valueFormat="YYYY-MM-DD"
這樣設置後能夠在視圖上顯示和獲得對應的格式

設置label的寬度很是好用
:labelCol="{ style: 'width: 100px' }"
複製代碼

場景

在使用vue的項目開發的過程當中
常常會定義大量的組件使用
這個時候組件中的定義的數據類型就很是重要了
此時咱們須要定義組件中須要的數據類型
以前我只知道簡單的幾個
今天突然發現原來還能夠這樣使用簡直太棒了
特別是自定義驗證這一塊可能不常常用
可是能夠處理不少特殊的場景
複製代碼

vue中props的驗證規則

props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會經過任何類型驗證)
    propA: Number,

    // 多個可能的類型
    propB: [String, Number],
    
    <!-- 我以前一直覺得多個驗證是這樣寫 -->
    propB:String | Number

    // 必填的字符串
    propC: {
      type: String,
      required: true
    },

    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },

    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function() {
        return { message: 'hello' }
      }
    },

    // 自定義驗證函數
    propF: {
      validator: function(value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    
    // 具備默認值的函數
    propG: {
      type: Function,
      // 與對象或數組默認值不一樣，這不是一個工廠函數 —— 這是一個用做默認值的函數
      default: function() {
        return 'Default function'
      }
    }
複製代碼