VUE3-Elementplus-form表單-筆記

?1. 結構相關

? ? ? el-row表示一行，一行分成24份

? ? ? ?el-col表示列 ?

? ? ? ?(1) :span="12" ?代表在一行中，占12份 (50%)

? ? ? ?(2) :span="6" ? 表示在一行中，占6份 ?(25%)

? ? ? ?(3) :offset="3" 代表在一行中，左側margin份數

? ? ? ?el-form 整個表單組件

? ? ? ?el-form-item 表單的一行（一個表單域）

? ? ? ?el-input 表單元素（輸入框）

? ? 2. 校驗相關

? ? ? ?(1) el-form => :model="ruleForm" ? ? ?綁定的整個form的數據對象 { xxx, xxx, xxx }

? ? ? ?(2) el-form => :rules="rules" ? ? ? ? 綁定的整個rules規則對象 ?{ xxx, xxx, xxx }

? ? ? ?(3) 表單元素 => v-model="ruleForm.xxx" 給表單元素，綁定form的子屬性

? ? ? ?(4) el-form-item => prop配置生效的是哪個校驗規則 (和rules中的字段要對應)

/ 整個表單的校驗規則

// 1. 非空校驗 required: true ? ? ?message消息提示， ?trigger觸發校驗的時機 blur change

// 2. 長度校驗 min:xx, max: xx

// 3. 正則校驗 pattern: 正則規則 ? ?\S 非空字符

// 4. 自定義校驗 => 自己寫邏輯校驗 (校驗函數)

// ? ?validator: (rule, value, callback)

// ? ?(1) rule ?當前校驗規則相關的信息

// ? ?(2) value 所校驗的表單元素目前的表單值

// ? ?(3) callback 無論成功還是失敗，都需要 callback 回調

// ? ? ? ?- callback() 校驗成功

// ? ? ? ?- callback(new Error(錯誤信息)) 校驗失敗

相應代碼：

vue3中，以按需引入了elementplus和icons?


<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import {ref} from 'vue'const isRegister = ref(false)
//用于提交整個form表單數據
const formModel=ref({username:'',password:'',repassword:''
})
//用于校驗表單數據
const rules={username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 5, max: 10, message: '用戶名必須是5-10位的字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ pattern: /^\S{6,15}$/, message: '密碼必須是6-15位', trigger: 'blur' }],//自定義校驗repassword:[{ required: true, message: '請輸入密碼', trigger: 'blur' },{ pattern: /^\S{6,15}$/, message: '密碼必須是6-15位', trigger: 'blur' },{validate:(rule,value,callback)=>{if(value!==formModel.value.password){callback(new Error('兩次輸入的密碼不一致'))}else{callback()//不成功也要callback }}}]
}
</script>                                           
<template><!-- el-row表示一行，一行表示24分 --><!-- ：span表示一行中占幾份 ：offset在一行中左側margin份數 --><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注冊相關表單 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注冊</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="請輸入用戶名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="請輸入密碼"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-model="formModel.repassword":prefix-icon="Lock"type="password"placeholder="請輸入再次密碼"></el-input></el-form-item><el-form-item><el-buttonclass="button"type="primary"auto-insert-space>注冊</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登錄相關表單 --><el-form:model="formModel":rules="rules"size="large"autocomplete="off"v-else><el-form-item><h1>登錄</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="請輸入用戶名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="請輸入密碼"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>記住我</el-checkbox><el-link type="primary" :underline="false">忘記密碼？</el-link></div></el-form-item><el-form-item><el-buttonclass="button"type="primary"auto-insert-space>登錄</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注冊 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background: url('../../assets/logo2.png') no-repeat 60% center / 240px auto,url('../../assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

代碼中理解點：

實例代碼：

const rules = {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }, // 必填項，觸發條件為失焦{ min: 5, max: 10, message: '用戶名必須是5-10位的字符', trigger: 'blur' } // 字符長度限制，觸發條件為失焦],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }, // 必填項，觸發條件為失焦{ pattern: /^\S{6,15}$/, message: '密碼必須是6-15位', trigger: 'blur' }, // 正則表達式，非空白字符，長度6-15，觸發條件為失焦{ validator: validatePassword, trigger: 'blur' } // 自定義校驗函數，觸發條件為失焦],email: [{ required: true, message: '請輸入郵箱地址', trigger: 'blur' }, // 必填項，觸發條件為失焦{ type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur' } // 類型為郵箱，觸發條件為失焦],age: [{ type: 'number', min: 18, max: 60, message: '年齡必須在18到60歲之間', trigger: 'blur' } // 類型為數字，數值范圍18-60，觸發條件為失焦],website: [{ type: 'url', message: '請輸入正確的網址', trigger: 'blur' } // 類型為網址，觸發條件為失焦],agree: [{ type: 'boolean', required: true, message: '請同意協議', trigger: 'change' } // 類型為布爾值，必填項，觸發條件為改變],colors: [{ type: 'array', required: true, message: '請選擇至少一個顏色', trigger: 'change' } // 類型為數組，必填項，觸發條件為改變],birthdate: [{ type: 'date', required: true, message: '請選擇生日', trigger: 'change' } // 類型為日期，必填項，觸發條件為改變],phone: [{ pattern: /^1[34578]\d{9}$/, message: '請輸入正確的手機號碼', trigger: 'blur' } // 正則表達式，校驗手機號碼，觸發條件為失焦],hexColor: [{ type: 'hex', message: '請輸入正確的16進制顏色值', trigger: 'blur' } // 類型為16進制顏色值，觸發條件為失焦],custom: [{ validator: customValidator, trigger: 'change' } // 自定義校驗函數，觸發條件為改變]
};// 自定義校驗函數
const validatePassword = (rule, value, callback) => {if (value.length < 8) {callback(new Error('密碼至少8位'));} else {callback();}
};const customValidator = (rule, value, callback) => {if (value !== 'customValue') {callback(new Error('自定義校驗不通過'));} else {callback();}
};

解釋

required: 必填項。
javascript
復制代碼

{ required: true, message: '請輸入用戶名', trigger: 'blur' }
min 和 max: 限制長度或數值范圍。
javascript
復制代碼

{ min: 5, max: 10, message: '用戶名必須是5-10位的字符', trigger: 'blur' }
pattern: 正則表達式校驗。
javascript
復制代碼

{ pattern: /^\S{6,15}$/, message: '密碼必須是6-15位', trigger: 'blur' }
type: 校驗字段的類型。
javascript
復制代碼

{ type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur' }
其他類型包括：string, number, boolean, method, regexp, integer, float, array, object, enum, date, url, hex。
validator: 自定義校驗函數。
javascript
復制代碼

{ validator: validatePassword, trigger: 'blur' }
len: 校驗長度（適用于字符串和數組）。
javascript
復制代碼

{ len: 6, message: '長度必須為6位', trigger: 'blur' }
enum: 枚舉類型校驗。
javascript
復制代碼

{ type: 'enum', enum: ['option1', 'option2'], message: '請選擇一個有效的選項', trigger: 'change' }
whitespace: 校驗字段是否包含空白字符。
javascript
復制代碼

{ whitespace: true, message: '該字段不能包含空格', trigger: 'blur' }
trigger: 定義校驗規則觸發的條件。
javascript
復制代碼

trigger: 'blur' // 或 'change'
transform: 在校驗前對字段的值進行轉換。
javascript
復制代碼

{ type: 'number', transform(value) { return Number(value); }, message: '請輸入有效的數字', trigger: 'blur' }
?