2021-05-25

vue+antDesign实现富文本ueditor必填校验和长度控制

富文本为必填时，不填写的情况下点击提交，提示必填，此处使用的ant form表单校验


注释掉的部分，可以实现必填校验，但在次输入时，不能清空校验，原因是因为，点击提交时，才给form.peoMessage赋值，输入时候监听不到，于是给富文本增加监听器

红框内是比写的，目的是为了proMessage每次更新都触发一次校验。

ant官网给出自定义校验的api，使用这个方法校验

在data中调用自定义校验方法，这样就能实现输入时候校验

下面给出代码，可以直接粘贴复制使用。

proMessage:[{validator: proMessageTrigger,trigger: ‘change’}],

let proMessageTrigger = (rule, value, callback) => {
if (!value) {
return callback(new Error(‘必填’))
} else {
return callback()
}
}

const editorProject = UE.getEditor(“editorProjectContent”);
editorProject.ready(function () {
UE.getEditor(“editorProjectContent”).addListener(“contentChange”,function(){
that.form.proMessage = UE.getEditor(‘editorProjectContent’).getContentTxt()
that.$refs.form.validateField(“proMessage”,validate => {
if (validate) {
}
}）
}）
}）