在普通表单中对输入框、选择框都有校验案例。
但是在自定义非空中如何进行校验官网并没有说明
关键代码 clearValidate 方法清除校验
this.$refs.formValue.clearValidate('signinimg')使用案例
<template>
<div class="stylebg">
<Tabs icons="el-icon-shopping-bag-2" :arrs="tabs" />
<!--表格 -->
<div style="margin-top: 20px">
<el-form ref="formValue" label-width="120px" :rules="rules" :model="formValue">
<el-form-item label="标题" prop="title">
<el-input v-model="formValue.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="单选图">
<div class="imagelist">
<div class="imagelist imgbox" @click="uploadimg('img','1')" v-if="formValue.img">
<el-image class="img" :src="formValue.img" fit="cover" ></el-image>
</div>
<div style="border: 1px dashed #d9d9d9;" class="avatar-uploader" @click="uploadimg('img','1')" v-else>
<i class="el-icon-plus" style="width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;"></i>
</div>
</div>
</el-form-item>
<el-form-item label="多选图">
<div class="imagelist">
<div v-for="(item, i) in formValue.imgs" :key="i" class="imagelist imgbox">
<el-image class="img" :src="item" fit="cover" ></el-image>
<img src="@/assets/close.png" class="close" @click="handleRemove(i)"/>
</div>
<div style="border: 1px dashed #d9d9d9;" class="avatar-uploader" @click="uploadimg('imgs','2')">
<i class="el-icon-plus" style="width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;"></i>
</div>
</div>
</el-form-item>
<el-form-item label="电子签名" prop="signinimg">
<div @click="signinVisible=true" style="width: 200px;background-color: #d9d9d9;">
<el-image :src="formValue.signinimg" style="width: 200px;height: 100px;display: flex;align-items: center;justify-content: center;color: #999;">
<div slot="error" > 点击签名 </div>
</el-image>
</div>
</el-form-item>
<el-form-item label="">
<el-button type="primary" size="small" @click="upform">确定</el-button>
<el-button type="primary" size="small" @click.native="back">返回</el-button>
</el-form-item>
</el-form>
</div>
<el-dialog title="选择图片" :visible.sync="dialogVisible" width="900px">
<uploadDialog v-if="dialogVisible" @getPic="getPic" :chosetype="picChoseType"></uploadDialog>
</el-dialog>
<el-dialog title="电子签名" :visible.sync="signinVisible" width="700px">
<signinDia @setsignin="setsignin"></signinDia>
</el-dialog>
</div>
</template>
<script>
import wueditor from '@/components/wueditor.vue'; // ES6 Module
import {addcaseAPI,getcaseinfoAPI,updatecaseAPI} from "@/api/article"
import uploadDialog from "@/components/uploadDialog.vue"
import signinDia from "@/components/signinDia.vue"
export default {
components: {
wueditor,uploadDialog,signinDia
},
data() {
return {
formValue:{
img:"",
imgs:[],
status:0
},
headers:{},
tabs: ["轮播图管理", "添加轮播图"],
dynamicTags: [],
dialogVisible: false,
signinVisible: false,
inputValue: '',
picTit:"",
picChoseType:"1",
rules:{
title: [ { required: true, message: '名称不能为空', change: 'blur', }],
signinimg: [ { required: true, message: '电子签名不能为空' }],
}
};
},
created() {
this.headers={
Authorization:"Bearer " +localStorage.getItem('token')
}
this.getinfo()
},
methods: {
upform(){
this.$refs.formValue.validate((valid) => {
if (valid) {
alert("success")
}else{
if(this.formValue.signinimg) this.$refs.formValue.clearValidate('signinimg')
}
})
// if (this.$route.query.id) {
// updatecaseAPI(this.formValue).then(res=>{
// this.$message.success("成功")
// this.$router.back()
// })
// return
// }
// addcaseAPI(this.formValue).then(res=>{
// this.$message.success("成功")
// this.$router.back()
// })
},
setsignin(img){
this.formValue.signinimg=img
this.signinVisible=false
this.$refs.formValue.clearValidate('signinimg')
},
uploadimg(picTit,picChoseType){
this.dialogVisible=true
this.picTit=picTit
this.picChoseType=picChoseType
},
getPic(images){
console.log(images)
switch(this.picTit){
case "img":
this.formValue.img=images.url
break
case "imgs":
var list=this.formValue.imgs
this.formValue.imgs=list.concat(images.map(item=> item.url))
break
}
this.dialogVisible=false
},
handleRemove(i) {
this.formValue.imgs.splice(i,1)
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
getinfo(){
var id=this.$route.query.id
if (id) {
getcaseinfoAPI({id}).then(res=>{
this.formValue=res
})
}
},
handleAvatarSuccess2(res){
this.formValue.img = res.data
console.log(res.data )
},
back(){
this.$router.back()
},
}
};
</script>
<style lang="less">
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.form {
margin: 15px 0;
}
.page {
background-color: #fff;
padding: 10px;
.el-pagination .btn-next,
.el-pagination .btn-prev {
background-color: #ffffff !important;
}
}
.imagelist{
display: flex;
align-items: center;
.imgbox{
border: 1px solid #d9d9d9;
position: relative;
margin-right: 20px;
.img{
width: 100px;
height: 100px;
border-radius: 6px;
}
.close{
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
cursor: pointer;
}
}
}
</style>
