欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年03月24日 09:33:20   作者：ZhangbiaoAAAAA  
表單驗(yàn)證在很多地方都可以用的到，本文主要介紹了element自定義表單驗(yàn)證上傳身份證正反面的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大概是這個(gè)樣式

 兩個(gè)上傳組件寫在一個(gè)form-item里進(jìn)行自定義表單驗(yàn)證

每次驗(yàn)證，通過判斷上傳組件綁定的值進(jìn)行判斷，callback不同的提示錯(cuò)誤

<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() {
        // 身份證正面驗(yàn)證
        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('請(qǐng)上傳身份證正面'))
            }else if(this.personalForm.merIdenImgBack==''){
                return callback(new Error('請(qǐng)上傳身份證背面'))
            }else{
                callback()
            }
        };
        return {
            uploadURL:'',//自己的上傳地址
            personalForm:{
                merIdenImgFront:'',//身份證正面
                merIdenImgBack:'',//身份證反面
            },
            merIdenImgFront:'',
            merIdenImgBack:'',
            rules:{
                // 身份證正反面
                merIdenImgFront: [
                    {validator: validateImgFront, trigger: 'change'}
                ]
            }
        }   
    },
    methods:{
        // 上傳身份證正面成功
        handleAvatarSuccess1(response, file, fileList){
            this.merIdenImgFront=file.url;//保存臨時(shí)圖片
            this.personalForm.merIdenImgFront=response;//保存到提交表單
        },
        // 上傳身份證反面成功
        handleAvatarSuccess2(response, file, fileList){
            this.merIdenImgBack=file.url;//保存臨時(shí)圖片
            this.personalForm.merIdenImgBack=response;//保存到提交表單
        },
        
        // 身份證表單驗(yàn)證
        idenImghandleChange(){
            this.$refs.personalForm.validateField('merIdenImgFront');//對(duì)部分表單字段進(jìn)行校驗(yàn)的方法，也就是手動(dòng)進(jìn)行表單驗(yàn)證（關(guān)鍵代碼）
        },
        //提交
        personalSubmit(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    console.log('OJBK')
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

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

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

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

相關(guān)文章

最新評(píng)論