vue設置必填項和判斷必填項是否填入的彈窗提示

更新時間：2023年11月03日 15:14:15 作者：Luffy船長

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

項目場景：

有的功能需要設置必填項,當然也需要判斷是不是添上了,還需要加上提示框

問題描述

1.如何設置必填項

2.如何設置彈窗提示

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

原因分析：

其他兩個我沒有什么問題,在將二者結合起來的時候判斷的位置要加對,還有else也要放對位置

解決方案：

1.設置必填項

:rules=" "這里綁定你需要設置必填項的方法名
ref=" " 這里綁定你進行判斷的方法名
方法的數組里設置的屬性required: false,代表不是必填項
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="人員編號" prop="psnNo">
                                    <el-input v-model="queryInfos.psnNo"></el-input>
                                </el-form-item>
                            </el-col>

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

2.設置提示彈框

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

3.將二者結合起來

一定要注意判斷的位置還有你交互代碼的位置以及else的位置,三個位置錯的話效果會有偏差

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) { //必填項的判斷,點擊確定和取消這里會自動判斷,確定就會執(zhí)行下面的語句,但是
                        this.$confirm("您確定【提交】？", "提示", { //這里配合data里的addqueryInfos進行使用可以達到非空判斷+提示框的效果
                            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 != "") { //后端是數組,前端是list集合所以需要把遍歷到的信息存到數組里,然后調用此功能時將數據插入到集合中    
                                    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(()=>{});//注意這里，這里是重點?。?！
                    } else {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
                        this.$message.error('新增失敗,請檢查!!!')
                    }
                })
            },

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

您可能感興趣的文章: