element-ui的表單驗證配合其他組件使用（wangEditor），顯示出element表單驗證的必填小紅點
- 2020 年 9 月 9 日
- 筆記
- element-ui, VUE
在使用element-ui開發的時候，總感覺element-ui的組件不夠用，這個時候總會需要配合其他的單獨的組件來使用。這一次我就用到了富文本，然而element-ui中並沒有富文本組件，而且是用在表單中，需要進行表單驗證（就是簡單的驗證是否為空）。
wangEditor安裝、引入以及創建編輯器
安裝wangeditor
npm install wangeditor
引入、創建編輯器
import Editor from 'wangeditor' //引入wangEditor富文本編輯器
const editor = new Editor('#editor')
//還有一些配置性的東西我是放在了vue的生命周期函數mounted裡面了（看個人吧，這裡無所謂）
mounted(){
editor.customConfig.uploadImgShowBase64 = true //上傳的圖片以base64的方式保存
//上面一行以及官網其他的配置性的東西可以放到const editor = new Editor('#editor')這一句下面，但是下面一行程式碼只能放到mounted不然會報錯
editor.create() //生成富文本編輯器
}
其他配置可以查看官方文檔，我們的主題不是這個，所以感興趣的自己到官網看一看吧。
與表單驗證的結合
template
<el-form-item label="正文" prop="text"> /*我們依舊使用prop來規定需要驗證的欄位*/
<div id="editor"></div> /*開始我是想要直接使用v-model來綁定值，但是這裡是div，無法使用v-model*/
</el-form-item>
data() {
return {
aform: { /*表單數據格式*/
title: '',
articleType: null,
text: '',
type: null
},
rules: {
title: [{required: true, message: '請填寫文章標題', trigger: 'blur'}],
articleType: [{required: true, message: '請選擇文章分類', trigger: 'change'}],
text: [{required: true, message: '請填寫正文內容'}] /*這是我們的主要要驗證的東西*/
}
}
},
methods: {
onSubmit(formName) { //提交表單
/*
1、在提交表單之前，我們一定要做的就是獲取富文本數據（因為是單獨的組件，所以需要單獨獲取），在this.$refs[formName].validate((valid)=>{})之前做下列操作
2、判斷純文本是否為空，如果為空，則不為data中aform.text賦值或者賦值為''空字元串，如果不為空，責把完整的富文本賦值給aform.text
3、等待驗證完成....
*/
const ftext = editor.txt.text().trim() //獲取純文本
const fhtml = editor.txt.html() //獲取完整富文本
if(ftext !== '') { //判斷是否為空 editor.txt.text() 和 editor.txt.html()的區別是前者純文本，而後者有html標籤（即使在沒有任何內容的時候也會有默認的標籤）
this.aform.text = fhtml
} else {
this.aform.text = ''
}
//上面只是為了理解，我們可以把這個過程簡化成一個三元表達式（至少我認為這樣寫比較簡潔）
//this.aform.text = editor.txt.text().trim() === '' ? '' : editor.txt.html()
this.$refs[formName].validate((valid)=>{
if(valid) {
//表單驗證通過
}
})
}
}
好了，這樣就已經好了。
其實就是在原有的驗證基礎上，在沒有進行提交驗證之前給需要驗證的值進行處理，如果富文本編輯器中沒有數據，則不做任何事，那麼aform.text就是空的，所以提交驗證時返回false，驗證不通過，顯示rules中規定的錯誤資訊;反則富文本編輯器中有內容，則把完整內容（editor.txt.html()）賦值給aform.text，這時它就不為空，所以返回true，驗證通過，提交數據。
作為一名前端的新手，接受各方的建議、批評以及教導，所以如果您有更好的辦法或者其他的建議完全可以告訴我哦0.0
