快捷導(dǎo)航

element自定義表單驗證上傳身份證正反面的實現(xiàn)

更新時間：2022年03月24日 09:33:20 作者：ZhangbiaoAAAAA

表單驗證在很多地方都可以用的到，本文主要介紹了element自定義表單驗證上傳身份證正反面的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下

大概是這個樣式

兩個上傳組件寫在一個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-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)=>{//（關(guān)鍵代碼）
            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');//對部分表單字段進行校驗的方法，也就是手動進行表單驗證（關(guān)鍵代碼）
        },
        //提交
        personalSubmit(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    console.log('OJBK')
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

有一個問題是，點擊圖片上傳后，就已經(jīng)請求接口上傳了。

正常來說，應(yīng)該是點擊提交后，才能進行上傳。懶得改了，大家懂就行.

到此這篇關(guān)于element自定義表單驗證上傳身份證正反面的實現(xiàn)的文章就介紹到這了,更多相關(guān)element表單驗證上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: