详解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 07 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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
php 日期时间处理函数小结
2009/12/18 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
微信支付开发发货通知实例
2016/07/12 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
医院办公室主任职责
2013/12/29 职场文书
学校春季防火方案
2014/06/08 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
简爱读书笔记
2015/06/26 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
python简单验证码识别的实现过程
2021/06/20 Python