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
