项目场景：

有的功能需要设置必填项,当然也需要判断是不是添上了,还需要加上提示框

问题描述

1.如何设置必填项

2.如何设置弹窗提示

3.如何将二者结合起来实现点击时既可以判断必填项也可以弹出提示框

原因分析：

其他两个我没有什么问题,在将二者结合起来的时候判断的位置要加对,还有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) => {if (valid) { //必填项的判断,点击确定和取消这里会自动判断,确定就会执行下面的语句,但是this.$confirm("您确定【提交】？", "提示", { //这里配合data里的addqueryInfos进行使用可以达到非空判断+提示框的效果confirmButtonText: "确定",cancelButtonText: "取消",}).then(() => {}}).catch(()=>{});//注意这里，这里是重点,加上之后那两个确定取消才会被正常使用,不加功能不影响!!!!!但是前端控制台会报错！！！} })},

3.将二者结合起来

一定要注意判断的位置还有你交互代码的位置以及else的位置,三个位置错的话效果会有偏差

async insertPriceList(queryInfos) {//新增处方信息和药品信息this.$refs.insertPriceList.validate((valid) => {if (valid) { //必填项的判断,点击确定和取消这里会自动判断,确定就会执行下面的语句,但是this.$confirm("您确定【提交】？", "提示", { //这里配合data里的addqueryInfos进行使用可以达到非空判断+提示框的效果confirmButtonText: "确定",cancelButtonText: "取消",}).then(() => {const {data: results,} = this.$http.post('/medicine/putMedicine', this.queryInfos)this.$message.success('处方新增成功！')for (var i = 0; i < this.baseForm.addForm.length; i++) {if (this.baseForm.addForm[i].regName != "") { //后端是数组,前端是list集合所以需要把遍历到的信息存到数组里,然后调用此功能时将数据插入到集合中  this.getData()this.submit()this.update = falsethis.$nextTick(() => {this.update = true})}}this.getData()}).catch(()=>{});//注意这里，这里是重点！！！} else {this.$message.error('新增失败,请检查!!!')}})},

vue设置必填项和判断必填项是否填入的弹窗提示相关推荐

【必选项提示小方法】vue处理多个条件选择时，判断必选项没有选择的弹出对应的提示【通俗易懂，详细注释】
前言: 前端小伙伴们很多时候会遇到一个情况,就是页面中查询的时候有多个条件,可能是输入框可能是下拉框或者时间选择器,其中肯定会有一些选项是必选项,那么这时候就会出现一个情况,你需要根据必选项有没有被选 ...
html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
内容介绍热点排行相关文章下载地址↓ 效果非常不错的登录窗口,输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段 ,经测试,效果相当不错,感兴趣的朋友可以参考下哈在网页head区添加以下代码 ...
MacOS中Dock栏的设置和使用技巧，新手必看
MacOS中Dock栏的设置和使用技巧,新手必看 Dock栏就是Mac放置常用应用程序和文件夹快捷方式的任务栏,为你访问这个应用和文件提供了非常方便的入口. 作为Mac用户最常使用的区域,要知道如何才 ...
广东工业大学文远知行杯新生程序设计竞赛（重现赛）G-我最好的朋友【博弈（必败点的判断，胜败转化）】
链接分析这到题关键是找到先手的人什么时候会必败,为什么找必败而不是必胜,博弈常常都是不公平的,先手的人往往胜率会高,后手则比较被动,所以必败的情况比较少.我们考虑什么时候后手能够胜利,一种常见的情 ...
vue 设置每个页面的title
vue 设置每个页面的title 由于vue文件中只有一个Index.html 文件 title 显示需要通过document.title来设置 1.router---index.js文件中添加met ...
Vue设置浏览器小图标（ICON）
Vue设置浏览器小图标当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢? 第一步:准备logo图片信息找到自己的logo,通过图片在线转换格式,转换成 ...
html radio vue,vue radio单选框,获取当前项(每一项)的value值操作
前言本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以 1.使用v-for循环的radio单选框 01)需要注意的是,这是使用的是 chan ...
vue设置一个简单的计算器
vue设置一个简单的计算器 <div id="app"><input type="text" v-model="n1"&g ...
计算机关闭开启启动程序,如何设置开机启动项？电脑开机启动项怎么增加与关闭？...
大家都知道刚买来的电脑开机速度很快,但是随着各种应用的安装,开机速度会变得非常慢,电脑也会变得异常的卡顿,这是因为有很多应用都会默认开机自启动,电脑每次开机都会依次自启动这些应用,可想而知电脑会变得多 ...
element 组件中 el-form-item label= ‘vue介绍（vue设置）‘ 强制换行
开发中会遇到一些奇怪的标题,需要强制换行但是label 中没法用换行标签,特殊符号.怎么解决? html代码中文字换行 <el-form-itemclass='singerH'label=& ...

vue设置必填项和判断必填项是否填入的弹窗提示

项目场景：

问题描述

原因分析：

解决方案：

vue设置必填项和判断必填项是否填入的弹窗提示相关推荐

最新文章

热门文章