记录element-ui自定义表单验证上传身份证正反面

大概是这个样式

两个上传组件写在一个form-item里进行自定义表单验证

每次验证，通过判断上传组件绑定的值进行判断，callback不同的提示错误

<template><div><el-form :model="personalForm" :rules="rules" ref="personalForm" label-width="180px"><el-row><el-col :span="24"><el-form-item label="身份证证件照：" required style="" prop="merIdenImgFront"><el-row type="flex" justify="space-between" class="uploadidcard"><el-col :span="10"><el-uploadclass="idCard1":action="uploadURL"list-type="picture-card":show-file-list="false":on-success="handleAvatarSuccess1"accept=".JPG, .png, .jpeg"multiple="multiple":on-change="idenImghandleChange"><img v-if="merIdenImgFront" :src="merIdenImgFront" class="avatar" style="width:100%;height:100%"></el-upload></el-col><el-col :span="10"><el-uploadclass="idCard2":action="uploadURL"list-type="picture-card":show-file-list="false":on-success="handleAvatarSuccess2"accept=".JPG, .png, .jpeg"multiple="multiple":on-change="idenImghandleChange"><img v-if="merIdenImgBack" :src="merIdenImgBack" class="avatar" style="width:100%;height:100%"></el-upload></el-col></el-row></el-form-item></el-col></el-row><el-form-item label=""> <p style="color:#888">注：以上所需上传照片仅支持JPEG、GIF、PNG格式的图片，大小不超过2M。</p></el-form-item><el-form-item label=""><div class="btn-wrap"><button type="button" @click="personalSubmit('personalForm')">提交</button></div></el-form-item></el-form></div>
</template>
<script>
export default {data() {// 身份证正面验证var validateImgFront=(rule, value, callback)=>{//（关键代码）if(this.personalForm.merIdenImgFront==''&&this.personalForm.merIdenImgBack==''){return callback(new Error('附件不能为空'))}else if(this.personalForm.merIdenImgFront==''){return callback(new Error('请上传身份证正面'))}else if(this.personalForm.merIdenImgBack==''){return callback(new Error('请上传身份证背面'))}else{callback()}};return {uploadURL:'',//自己的上传地址personalForm:{merIdenImgFront:'',//身份证正面merIdenImgBack:'',//身份证反面},merIdenImgFront:'',merIdenImgBack:'',rules:{// 身份证正反面merIdenImgFront: [{validator: validateImgFront, trigger: 'change'}]}}   },methods:{// 上传身份证正面成功handleAvatarSuccess1(response, file, fileList){this.merIdenImgFront=file.url;//保存临时图片this.personalForm.merIdenImgFront=response;//保存到提交表单},// 上传身份证反面成功handleAvatarSuccess2(response, file, fileList){this.merIdenImgBack=file.url;//保存临时图片this.personalForm.merIdenImgBack=response;//保存到提交表单},// 身份证表单验证idenImghandleChange(){this.$refs.personalForm.validateField('merIdenImgFront');//对部分表单字段进行校验的方法，也就是手动进行表单验证（关键代码）},//提交personalSubmit(formName){this.$refs[formName].validate(async(valid) => {if (valid) {console.log('OJBK')} else {return false;}});},}
}
</script>

有一个问题是，点击图片上传后，就已经请求接口上传了。

正常来说，应该是点击提交后，才能进行上传。懒得改了，大家懂就行.

记录element-ui自定义表单验证上传身份证正反面相关推荐

element自定义表单验证上传身份证正反面的实现
效果图 <template> <div> <el-form :model="personalForm" :rules=&quo ...
Element UI自定义表单验证公共提取
2019独角兽企业重金招聘Python工程师标准>>> 主要代码: util文件夹下validate.js 文件 export const VDT = {messages:{requ ...
小程序基础开发（四）：weui-wxss组件表单页面，WxValidate.js组件表单验证上传
一,使用weui-wxss组件做一个表单页面 WeUI组件库简介这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小 ...
上传多张图片的html表单,element在form表单里上传多张张图片
1.template里面 title="新增" :visible.sync="Visible" width="30%" > ref=& ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
表单验证与自定义表单验证
/ 验证规则 rules: { // 多个验证用数组单个验证用对象// 验证账号acc: [{ required: true, message: '不能为空', trigger: 'blur' }, ...
iview自定义表单验证
@[TOC] iview自定义表单验证之前总结过iview简单表单验证: https://blog.csdn.net/A_LL_IS_WELL/article/details/111227468ht ...
ant-design-vue 表单验证和 validator 自定义表单验证
在 ant-design-vue 中,提供 FormModel 表单组件,且支持 v-model 数据绑定,同时可以校验和提交功能的表单. 一.表单验证 <a-form-modelref=&qu ...
vux使用方法 php,如何使用vux-ui自定义表单验证
这次给大家带来如何使用vux-ui自定义表单验证,使用vux-ui自定义表单验证的注意事项有哪些,下面就是实战案例,一起来看一下. 初学框架vue搭配vux使用发现这个UI库使用有些力不从心.下面说说 ...

记录element-ui自定义表单验证上传身份证正反面

记录element-ui自定义表单验证上传身份证正反面相关推荐

最新文章

热门文章