vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示

更新時(shí)間：2023年11月03日 15:14:15 作者：Luffy船長(zhǎng)

表格判斷在很多項(xiàng)目中都用得到,本文主要介紹了vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示,具有一定的參考價(jià)值,感興趣的可以了解一下

項(xiàng)目場(chǎng)景：

有的功能需要設(shè)置必填項(xiàng),當(dāng)然也需要判斷是不是添上了,還需要加上提示框

問題描述

1.如何設(shè)置必填項(xiàng)

2.如何設(shè)置彈窗提示

3.如何將二者結(jié)合起來實(shí)現(xiàn)點(diǎn)擊時(shí)既可以判斷必填項(xiàng)也可以彈出提示框

原因分析：

其他兩個(gè)我沒有什么問題,在將二者結(jié)合起來的時(shí)候判斷的位置要加對(duì),還有else也要放對(duì)位置

解決方案：

1.設(shè)置必填項(xiàng)

:rules=" "這里綁定你需要設(shè)置必填項(xiàng)的方法名
ref=" " 這里綁定你進(jìn)行判斷的方法名
方法的數(shù)組里設(shè)置的屬性required: false,代表不是必填項(xiàng)
required: true代表是必填

<el-form :model="queryInfos" :rules="addqueryInfos" ref="insertPriceList" label-width="100px" label-position="left">
                        <el-row :gutter="3" v-if="update">
                            <el-col :span="6">
                                <el-form-item label="人員編號(hào)" prop="psnNo">
                                    <el-input v-model="queryInfos.psnNo"></el-input>
                                </el-form-item>
                            </el-col>

</el-from>
addqueryInfos: {
                    iptOtpNo: [{
                        required: false,
                        message: '請(qǐng)輸門診編號(hào)',
                        trigger: 'blur'
                    }],
                    sheetId: [{
                        required: false,
                        message: '請(qǐng)輸入處方編號(hào)',
                        trigger: 'blur'
                    }],
                    epcId: [{
                        required: false,
                        message: '請(qǐng)輸入處方ID號(hào)',
                        trigger: 'blur'
                    }],
                    paName: [{
                        required: false,
                        message: '請(qǐng)輸入患者姓名',
                        trigger: 'blur'
                    }],
                    psnNo: [{
                        required: true,
                        message: '請(qǐng)輸入人員編號(hào)',
                        trigger: 'blur'
                    }],
                    psnCertType: [{
                        required: true,
                        message: '請(qǐng)輸入證件類型',
                        trigger: 'blur'
                    }],
                    certno: [{
                        required: true,
                        message: '請(qǐng)輸入證件號(hào)碼',
                        trigger: 'blur'
                    }],
                
                },
                dialog: false,

2.設(shè)置提示彈框

async insertPriceList(queryInfos) {                
                //新增處方信息和藥品信息
                this.$refs.insertPriceList.validate((valid) => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                    if (valid) { //必填項(xiàng)的判斷,點(diǎn)擊確定和取消這里會(huì)自動(dòng)判斷,確定就會(huì)執(zhí)行下面的語句,但是
                        this.$confirm("您確定【提交】？", "提示", { //這里配合data里的addqueryInfos進(jìn)行使用可以達(dá)到非空判斷+提示框的效果
                            confirmButtonText: "確定",
                            cancelButtonText: "取消",
                        }).then(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                            
                            }
                        }).catch(()=>{});//注意這里，這里是重點(diǎn),加上之后那兩個(gè)確定取消才會(huì)被正常使用,不加功能不影響!!!!!但是前端控制臺(tái)會(huì)報(bào)錯(cuò)！?。?
                    } 
                })
            },

3.將二者結(jié)合起來

一定要注意判斷的位置還有你交互代碼的位置以及else的位置,三個(gè)位置錯(cuò)的話效果會(huì)有偏差

async insertPriceList(queryInfos) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                //新增處方信息和藥品信息
                this.$refs.insertPriceList.validate((valid) => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                    if (valid) { //必填項(xiàng)的判斷,點(diǎn)擊確定和取消這里會(huì)自動(dòng)判斷,確定就會(huì)執(zhí)行下面的語句,但是
                        this.$confirm("您確定【提交】？", "提示", { //這里配合data里的addqueryInfos進(jìn)行使用可以達(dá)到非空判斷+提示框的效果
                            confirmButtonText: "確定",
                            cancelButtonText: "取消",
                        }).then(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                            const {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                                data: results,
                            } = this.$http.post('/medicine/putMedicine', this.queryInfos)
                            this.$message.success('處方新增成功！')
                            for (var i = 0; i < this.baseForm.addForm.length; i++) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                                if (this.baseForm.addForm[i].regName != "") { //后端是數(shù)組,前端是list集合所以需要把遍歷到的信息存到數(shù)組里,然后調(diào)用此功能時(shí)將數(shù)據(jù)插入到集合中    
                                    this.getData()
                                    this.submit()
                                    this.update = false
                                    this.$nextTick(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                                        this.update = true
                                    })
                                }
                            }
                            this.getData()
                        }).catch(()=>{});//注意這里，這里是重點(diǎn)?。?！
                    } else {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                        this.$message.error('新增失敗,請(qǐng)檢查!!!')
                    }
                })
            },

到此這篇關(guān)于vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示的文章就介紹到這了,更多相關(guān)vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: