element ui 红点_element-ui的表单验证配合其他组件使用（wangEditor），显示出element表单验证的必填小红点...

在使用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

/*我们依旧使用prop来规定需要验证的字段*/

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

原文：https://www.cnblogs.com/Guo-Xiaoqiang/p/13642803.html