详解element-ui设置下拉选择切换必填和非必填


Posted in Javascript onJune 17, 2019

➢ 需求

默认都是必选

下拉选择的时候

选择必填,活动名称为必填,需要校验和显示*

选择非必填,活动名称不做校验,隐藏*

详解element-ui设置下拉选择切换必填和非必填

➢ 初始校验规则

经测试,网上其他的方式都没有实现需求,动态切换rules中的required没有作用

因为按照以下的写法的话,element-ui在组件初始化后校验规则就定型了,切换也没用

rules: {
  name: [
    { required: true, message: "请输入名称", trigger: "blur" }
  ],
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}

➢ 解决方案

第一步:

去除rules中需要动态校验的字段规则

去除name

rules: {
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}

第二步:

在字段为nameform-item上,添加required属性

下面代码isHaveTo为新字段,根据下拉框选择的值来决定是为true还是false

<el-form-item label="活动名称" prop="name" :required="isHaveTo">
  <el-input v-model="ruleForm.name"></el-input>
</el-form-item>

第三步:

计算属性,新增字段isHaveTo

下拉选择框非必须是为1,其他都是必填,包括默认

<el-form-item label="活动名称" prop="name" :required="isHaveTo">
  <el-input v-model="ruleForm.name"></el-input>
</el-form-item>

效果如图:

下拉切换,*号显隐,提交时也有不同规则

注意,新的问题来了

在选择必填时,没有了之前的错误提示文字,而是element自带的提示

详解element-ui设置下拉选择切换必填和非必填

第四步:

设置错误提示

使用自定义函数控制流程

name字段重新加回去rules

注意是函数{ validator: validateName }

rules: {
  name: [{ validator: validateName }],
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}

然后设置函数validateName

可以看到,必填时按照我们设置的提示语提示,非必填时,校验通过

详解element-ui设置下拉选择切换必填和非必填

贴上代码

data() {
   // 验证活动名称的函数
   let validateName = (rule, value, callback) => {
     // 当活动名称为空值且为必填时,抛出错误,反之通过校验
     if (this.ruleForm.name === "" && this.isHaveTo) {
       callback(new Error("请输入活动名称"));
     } else {
       callback();
     }
   };
   return {
     ruleForm: {
       name: "",
       region: ""
     },
     rules: {
       name: [{ validator: validateName }],
       region: [
         { required: true, message: "请选择类型", trigger: "blur" }
       ]
     }
   };
 },

➢ 完整demo代码

demo使用vue-cli,引入element-ui

核心代码参考如下:

<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name" :required="isHaveTo">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%">
          <el-option label="必填" value="0"></el-option>
          <el-option label="非必填" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    // 验证活动名称的函数
    let validateName = (rule, value, callback) => {
      // 当活动名称为空值且为必填时,抛出错误,反之通过校验
      if (this.ruleForm.name === "" && this.isHaveTo) {
        callback(new Error("请输入活动名称"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        region: ""
      },
      rules: {
        name: [{ validator: validateName }],
        region: [
          { required: true, message: "请选择类型", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    isHaveTo: function() {
      return this.ruleForm.region !== `1`;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(`已提交表单`);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
Node.js文件编码格式的转换的方法
Apr 27 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
JS实现的字符串数组去重功能小结
Jun 17 #Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 #Javascript
深入解析koa之中间件流程控制
Jun 17 #Javascript
深入解读Node.js中的koa源码
Jun 17 #Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 #Javascript
javascript系统时间设置操作示例
Jun 17 #Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 #Javascript
You might like
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
跟老齐学Python之print详解
2014/09/28 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
Python中包的用法及安装
2020/02/11 Python
Django如何批量创建Model
2020/09/01 Python
《山谷中的谜底》教学反思
2014/04/26 职场文书
农民工讨薪标语
2014/06/26 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
三八节活动简报
2015/07/20 职场文书
话题作文之学会尊重
2019/12/16 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers