element-ui | 的表单验证配合wangEditor使用,显示出element表单验证的必填小红点

1,396 阅读2分钟

在使用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,验证通过,提交数据。

本人接受各方的建议、批评以及教导,所以如果您有更好的办法或者其他的建议一定要告诉我哦(✪ω✪)