南昌seo网站,软件开发 网页设计网站,河北网站开发公司,编程教学在普通表单中对输入框、选择框都有校验案例。
但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 this.$refs.formValue.clearValidate(signinimg) 使用案例
templatediv classstylebgTabs iconsel-… 在普通表单中对输入框、选择框都有校验案例。
但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 this.$refs.formValue.clearValidate(signinimg) 使用案例
templatediv classstylebgTabs iconsel-icon-shopping-bag-2 :arrstabs /!--表格 --div stylemargin-top: 20pxel-form refformValue label-width120px :rulesrules :modelformValueel-form-item label标题 proptitleel-input v-modelformValue.title placeholder请输入标题/el-input/el-form-itemel-form-item label单选图div classimagelistdiv classimagelist imgbox clickuploadimg(img,1) v-ifformValue.imgel-image classimg :srcformValue.img fitcover /el-image/div div styleborder: 1px dashed #d9d9d9; classavatar-uploader clickuploadimg(img,1) v-elsei classel-icon-plus stylewidth: 100px;height: 100px;display: flex;align-items: center;justify-content: center;/i/div/div/el-form-itemel-form-item label多选图div classimagelistdiv v-for(item, i) in formValue.imgs :keyi classimagelist imgboxel-image classimg :srcitem fitcover /el-imageimg src/assets/close.png classclose clickhandleRemove(i)//div div styleborder: 1px dashed #d9d9d9; classavatar-uploader clickuploadimg(imgs,2)i classel-icon-plus stylewidth: 100px;height: 100px;display: flex;align-items: center;justify-content: center;/i/div/div/el-form-itemel-form-item label电子签名 propsigninimgdiv clicksigninVisibletrue stylewidth: 200px;background-color: #d9d9d9;el-image :srcformValue.signinimg stylewidth: 200px;height: 100px;display: flex;align-items: center;justify-content: center;color: #999;div sloterror 点击签名 /div/el-image/div/el-form-itemel-form-item labelel-button typeprimary sizesmall clickupform确定/el-buttonel-button typeprimary sizesmall click.nativeback返回/el-button/el-form-item/el-form/divel-dialog title选择图片 :visible.syncdialogVisible width900pxuploadDialog v-ifdialogVisible getPicgetPic :chosetypepicChoseType/uploadDialog/el-dialogel-dialog title电子签名 :visible.syncsigninVisible width700pxsigninDia setsigninsetsignin/signinDia/el-dialog/div/templatescriptimport wueditor from /components/wueditor.vue; // ES6 Moduleimport {addcaseAPI,getcaseinfoAPI,updatecaseAPI} from /api/articleimport uploadDialog from /components/uploadDialog.vueimport signinDia from /components/signinDia.vueexport 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.signinimgimgthis.signinVisiblefalsethis.$refs.formValue.clearValidate(signinimg)},uploadimg(picTit,picChoseType){this.dialogVisibletruethis.picTitpicTitthis.picChoseTypepicChoseType},getPic(images){console.log(images)switch(this.picTit){case img:this.formValue.imgimages.urlbreakcase imgs:var listthis.formValue.imgsthis.formValue.imgslist.concat(images.map(item item.url))break}this.dialogVisiblefalse},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 idthis.$route.query.idif (id) {getcaseinfoAPI({id}).then(res{this.formValueres})}},handleAvatarSuccess2(res){this.formValue.img res.data console.log(res.data )},back(){this.$router.back()},}};/scriptstyle langless.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
