<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="原因描述" prop="reasonDesc" v-show="sybFlag">
<div ref="reasonDesc" contenteditable="true"></div>
</el-form-item>
<el-form-item label="功能描述" prop="functionDesc" v-show="!sybFlag">
<div ref="functionDesc" contenteditable="true"></div>
</el-form-item>
<el-button type="primary" @click="submitBtn">提交</el-button>
</el-form>
export default {
data(){
let reasonDescRule = (rule, value, callback) => {
if(this.sybFlag){
if(value == ''){
callback(new Error("请输入原因描述"));
}else{
callback();
}
}else{
callback();
}
};
let functionDescRule = (rule, value, callback) => {
if(!this.sybFlag){
if(value == ''){
callback(new Error("请输入功能描述"));
}else{
callback();
}
}else{
callback();
}
};
return {
form: {
reasonDesc: '',
functionDesc: '',
sybFlag: true
},
rules: {
reasonDesc:[
{ required: true, validator: reasonDescRule }
],
functionDesc:[
{ required: true, validator: functionDescRule }
]
}
}
},
methods: {
submitBtn(){
// 在提交之前先对表单自定义元素赋值,然后在进行验证操作
this.form.reasonDesc = this.$refs.reasonDesc.target.innerHtml;
this.form.reasonDesc = this.$refs.functionDesc.target.innerHtml;
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
<style lang="scss" scoped>
// 设置验证不通过时,边框为红色
.el-form-item.is-error .w-e-toolbar{
border-color: #F56C6C !important;
}
.el-form-item.is-error .w-e-text-container{
border-color: #F56C6C !important;
}
</style>
网友评论