<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>
ElementUI el-form 中不是 elementui 表单元素,如何表单验证
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 前同事在代码里写了大量v-if 编辑表单弹出时会触发一次验证 输入时输入框框有值也会触发验证规则 点击提交也会触发...