Element是非常好用的前端PCui庫,但是有些樣式與產品給的需求有差別,這里分享一下form表單校驗的心得。
Form 組件提供了表單驗證的功能,只需要通過 rules
屬性傳入約定的驗證規則,並將 Form-Item 的 prop
屬性設置為需校驗的字段名即可。
<el-form-item label="活動名稱" prop="name">
<el-input v-model="ruleForm.name">
</el-input> </el-form-item>
rules: {
name: [
{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
]
}
用框架極大的提升了我們的開發速度,但是也給了我們限制。這種校驗方式適合常見的form表單,但是對於上傳圖片、cascader級聯選擇器
的校驗卻很麻煩。但是我們可以手寫失焦方法,並給其元素綁定
:error=""
這時我們一旦不符合正則的驗證,也會出現框變紅,下方出現紅色的提示字