element自定义表单验证上传身份证正反面的实现

效果图

<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-upload
class="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-upload

class="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自定义表单验证上传身份证正反面的实现相关推荐

记录element-ui自定义表单验证上传身份证正反面
大概是这个样式两个上传组件写在一个form-item里进行自定义表单验证每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template><div& ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
小程序基础开发（四）：weui-wxss组件表单页面，WxValidate.js组件表单验证上传
一,使用weui-wxss组件做一个表单页面 WeUI组件库简介这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小 ...
Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)
<el-form:model="form":rules="rules"ref="formRef"style="max-wid ...
Vue element 自定义表单验证（手机号校验）
element官网中没有手机号的验证? 别慌,绝绝子来教你呀! 手机号验证效果如下: 代码如下: <el-form-item label="手机号" prop="t ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
ant-design-vue 表单验证和 validator 自定义表单验证
在 ant-design-vue 中,提供 FormModel 表单组件,且支持 v-model 数据绑定,同时可以校验和提交功能的表单. 一.表单验证 <a-form-modelref=&qu ...
Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）
form表单文件上传上菜 file_put.html <form action="" method="post" enctype="multi ...
保姆级别SpringBoot接入又拍云实现表单文件上传手册
一.背景本来打算使用七牛云进行文件上传的,由于自己一直没有实名认证(需要上传手持身份证就很烦),导致现在想用的时候用不了.另外自己所在的公司用的是又拍云,就试着看看又拍云能不能用,结果就有了这篇文章 ...

element自定义表单验证上传身份证正反面的实现

element自定义表单验证上传身份证正反面的实现相关推荐

最新文章

热门文章