位置: IT常识 - 正文

el-input设置必填提示(单个&多个)(el-input_inner)

编辑:rootadmin
el-input设置必填提示(单个&多个)

推荐整理分享el-input设置必填提示(单个&多个)(el-input_inner),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:el-input默认值设置,el-input默认值设置,el–input加个默认赋值,el-input 必填,el–input加个默认赋值,el-input 必填,el–input加个默认赋值,el-input默认值设置,内容如对您有帮助,希望把文章链接给更多的朋友!

有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上,话不多说,上才艺噻.

第一种(多个el-input同时限制):

举栗(element-ui官网的案例):

HTML代码:

<!-- 第一步对应 :model="ruleForm" ;第二步对应 :rules="rules" ;第三步对应 ref="ruleForm"--><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <!-- 这里的 prop 也不可少,是与rules中定义的每个属性的校验规则是一一对应的--> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item></el-form>

JavaScript代码:

<script> export default { data() { return { // 第一步,定义表单数据对象,并绑定 ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, // 第二步,定义表单数据校验对象,并绑定 rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ], date2: [ { type: 'date', required: true, message: '请选择时间', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ], resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ], desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { // 第三步,点击提交表单按钮的时候判断是否符合校验规则,符合才会往下运行,不符合会 // 按照你定义的校验规则提示警告 this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }</script>第二种(对单个el-input设置必填限制):

el-input设置必填提示(单个&多个)(el-input_inner)

我是自己封装的组件,暂时没想到其他的方式,目前看来是能符合功能需求的。

1.定义组件input-required.vue

html代码:

<template> <div> <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px" style="font-size:0.6vw"> <el-form-item :label="labelValue" :prop="this.propValue"> <el-input v-model="value" :placeholder="`请输入${labelValue}`" autocomplete="off" :disabled="isDisalbed" @change="isValid" ></el-input> </el-form-item> </el-form> </div></template>

javascript代码:

<script>export default { data() { return { value: "", form: {}, formRules: {} }; }, // 子组件使用props来接收父组件内传过来的数据 props: ["propValue", "labelValue", "isDisalbed", "indexValue"], created() { // 给子组件的对象动态添加属性并设置属性值 this.$set(this.form, this.propValue, ""); this.$set(this.formRules, this.propValue, [ { required: true, message: `${this.labelValue}不能为空`, trigger: "blur" } ]); }, methods: { // el-input失去焦点后会校验数据,空的话会提示,符合校验规则会触发父组件内方法更新视图数据 isValid() { // 把el-input输入框中的值赋给form对象,方便下一步向父组件传递 this.form[this.propValue] = this.value; this.$refs["formRef"].validate(valid => { if (valid) { this.$emit("updateData", this.form, this.indexValue); } }); } }};</script>

2.在要用到的地方引入使用组件

// 1.引入组件路径import InputRequired from "./components/input-required.vue";// 2.注册组件components: { InputRequired },// 3.使用组件 里面的disabled等属性按照自己需求添加就行,但是注意需要使用冒号 : 动态绑定数据// (1)这里的propValue是自定义组件里prop要绑定的属性,以及form中的属性;// (2)labelValue是自定义组件中label的值;// (3)isDisalbed是决定自定义组件中disabled是否启用;// (4)updateData方法用处是子组件内校验成功后触发父组件更新数据;<input-required :propValue="'attrName'" :labelValue="'模型参数'" :isDisalbed="true" @updateData="updateData" ></input-required>

成功(*^▽^*)!

----------------------------------------------------手动分割线------------------------------------------

今天下午写着写着突然想到,需求好像又不完全像上面的第二种一样,再更新一下吧,而且个人用着感觉这一版可能判断更精准一点.

需求是点击确认按钮,会判断参数值是否都填写了,但凡有一个没填写都会提示需要填写完整;只有所有的都填写完整才会继续往下运行.

 代码更新:

<!--这里设置ref动态绑定是给每一行唯一标识,不然表单校验的时候只会校验其中一行的数据,无法按照我们的想法每一行都去校验,这样即使有没填的也不会警告了,这可不行o(╯□╰)o --><input-required :ref="`required${scope.$index}`" :propValue="'attrValue'" :labelValue="'参数值'" :isDisalbed="false" :indexValue="scope.$index" @updateData="updateData" ></input-required>

 自定义组件内方法作如下修改:

isValid() { let flag = null; this.form[this.propValue] = this.value; this.$refs["formRef"].validate(valid => { if (valid) { flag = true; this.$emit("updateData", this.form, this.indexValue); } else { flag = false; } }); // 把每次校验的结果返回给父组件 return flag; }

 父组件内判断是否全部填写完毕:

// 确认配置完成,生成模型配置信息 submit() { let flag = true; // flag并上每一行校验的结果,如果全部填写,最后就是true,但凡有一行没有填写,flag都会是false for (let index = 0; index < this.algorithmParamOptions.length; index++) { flag = flag && this.$refs[`required` + index].isValid(); } if (flag) { ....... } else { this.$modal.msgError("请先填写完整!"); } },
本文链接地址:https://www.jiuchutong.com/zhishi/290838.html 转载请保留说明!

上一篇:Corjuem堡垒,印度果阿邦 (© Ingvar Kuznetsov/Shutterstock)(堡垒封印)

下一篇:从索尔兹伯里的峭壁上俯瞰爱丁堡,苏格兰荷里路德公园 (© Andrew Merry/Getty Images)(索尔兹伯里评价)

  • 微信投稿表情有收入吗(微信表情投稿成功后会有收入吗)

    微信投稿表情有收入吗(微信表情投稿成功后会有收入吗)

  • 没网络怎么关闭旁白(关掉没有wifi)

    没网络怎么关闭旁白(关掉没有wifi)

  • word图片样式改不了(word如何修改图片样式)

    word图片样式改不了(word如何修改图片样式)

  • 微信号必须是字母加数字吗(微信账号必须是字母)

    微信号必须是字母加数字吗(微信账号必须是字母)

  • 显示2g网络什么意思(显示2g网络什么意思QQ)

    显示2g网络什么意思(显示2g网络什么意思QQ)

  • 主板rgb接口在哪里(主板rgb接口怎么用)

    主板rgb接口在哪里(主板rgb接口怎么用)

  • 抖音好友发的视频怎么保存(抖音好友发的视频显示视频不见了)

    抖音好友发的视频怎么保存(抖音好友发的视频显示视频不见了)

  • mdz06aa是第几代啊(mdz09aa是第几代)

    mdz06aa是第几代啊(mdz09aa是第几代)

  • excel一列数字怎么求和(excel一列数字怎么修改其中一个)

    excel一列数字怎么求和(excel一列数字怎么修改其中一个)

  • 快手怎么一下翻到第一个作品(快手翻视频方便方法)

    快手怎么一下翻到第一个作品(快手翻视频方便方法)

  • 微信连麦闹钟会响吗(微信连麦闹钟会吵到对方吗)

    微信连麦闹钟会响吗(微信连麦闹钟会吵到对方吗)

  • 为什么蓝牙耳机不能两个同时使用(为什么蓝牙耳机总是自动断开)

    为什么蓝牙耳机不能两个同时使用(为什么蓝牙耳机总是自动断开)

  • iphone11处理器(iphone11处理器是a几)

    iphone11处理器(iphone11处理器是a几)

  • 微信不能播放视频怎么办(微信不能播放视频怎么解决)

    微信不能播放视频怎么办(微信不能播放视频怎么解决)

  • 苹果xsmax来电铃声越来越小怎么调(苹果xsmax来电铃声不响怎么办)

    苹果xsmax来电铃声越来越小怎么调(苹果xsmax来电铃声不响怎么办)

  • 语音通话费是指什么(语音通话费指哪些项目?)

    语音通话费是指什么(语音通话费指哪些项目?)

  • 撤回1小时以上微信妙招(撤回1小时以上微信语音妙招)

    撤回1小时以上微信妙招(撤回1小时以上微信语音妙招)

  • 显示未接通是什么情况(未接通原因)

    显示未接通是什么情况(未接通原因)

  • ppt2010样本模板在哪(office2010样本模板在哪)

    ppt2010样本模板在哪(office2010样本模板在哪)

  • 华为畅享10上市了吗(华为畅享10s参数)

    华为畅享10上市了吗(华为畅享10s参数)

  • 快手买衣服怎么退货(快手买衣服怎么查订单)

    快手买衣服怎么退货(快手买衣服怎么查订单)

  • 怎么投诉滴滴出行司机(如何投诉滴滴打车)

    怎么投诉滴滴出行司机(如何投诉滴滴打车)

  • 网上购电后需要插卡吗(网上购电后需要缴费吗)

    网上购电后需要插卡吗(网上购电后需要缴费吗)

  • 结构化程序设计的三种基本结构(结构化程序设计方法有哪三种)

    结构化程序设计的三种基本结构(结构化程序设计方法有哪三种)

  • 苹果Mac隐藏壁纸在哪里?Mac隐藏壁纸查找教程(macbook隐藏)

    苹果Mac隐藏壁纸在哪里?Mac隐藏壁纸查找教程(macbook隐藏)

  • 总结帝国CMS7.0使用常见问题(帝国cms视频教程)

    总结帝国CMS7.0使用常见问题(帝国cms视频教程)

  • 房地产开发公司组织架构
  • 净利润是指税前利润
  • 税控财务软件装什么系统
  • 职工罚款收入计入什么科目
  • 应收款项出售的分录怎么处理
  • 净利润为什么要减折旧
  • 租借车辆发生事故后的保险理赔问题
  • 开票时显示没有原票抄报信息
  • 增值税专用发票电子版
  • 发票种类和适用范围
  • 过路费发票可以抵扣增值税吗
  • 图书出版行业做账流程
  • 企业注销未分配利润要交个人所得税吗
  • 海运费需要代扣代缴吗
  • 购销合同印花税优惠政策
  • 存货的进项税要计入成本吗
  • 停车服务费的税率
  • 3%小规模纳税人开出的发票 农产品成本如何计算
  • 技术服务税票
  • 轮胎计入什么会计科目
  • 如何根据原始凭证填制记账凭证
  • 事业单位购入车辆如何做账
  • 企业购买的土地计入无形资产
  • 酒店水电费分录
  • 会计低值易耗品有哪些
  • 人民法院被收买了怎么办
  • 商贸公司不开发票还要上税吗
  • tplink路由器手机怎么设置
  • 原始股解禁后减持的条件是什么
  • 期货和远期
  • win10电脑文件夹打不开
  • 双网卡冲突会发生什么现象
  • php数组函数实现机选双色球
  • 股东借款给公司会计分录
  • vue3+element-plus Dialog对话框的使用 与 setup 写法的使用
  • 支付的食堂费用怎么入账
  • 小企业法人怎么交社保
  • 借款合同印花税怎么做账
  • web2的核心理念
  • metareplace -e
  • php怎么设置图片的大小
  • 软件的摊销期限
  • 建筑行业工程结算属于什么科目
  • 退货的会计处理分录
  • 抄税前要做什么
  • 固定资产加速折旧是什么意思
  • 企业送员工礼品怎么分享给团队
  • 小规模纳税人财务报表季报怎么填
  • 固定资产盘盈影响所有者权益吗
  • 路桥费税率是几个点
  • 高新技术企业亏损弥补的年限为十年
  • 当月没生产有生产费用怎么结转
  • 年末计提企业所得税的依据
  • 个人账户转公司账户附言写什么
  • 会务费发票开普票还是专票
  • 收到技术服务费计入什么科目
  • 小公司用什么财务软件做账
  • mysql使用语句
  • 标准sql如何计算时间戳的差
  • xp系统找不到指定的路径怎么办
  • ghost装win7无法启动
  • windows8的ie浏览器在哪
  • linux使用语言
  • 调出下拉菜单
  • js单线程多线程
  • jquery插件库怎么导入
  • nodejs如何配置环境变量
  • bat获取当前路径的值
  • 字符串中指定字符变换
  • jQuery实现磁力图片跟随效果完整示例
  • javascript设计
  • js判断浏览器内核和版本
  • python爬取前程无忧
  • python toga
  • 发票代码和发票号码有什么区别
  • 珠宝加工费骗局
  • 2018建筑材料考试试题及答案河南卷
  • 房产增值税和土地增值税的区别案例
  • 一巩固三衔接
  • portal
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设