详解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 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
zbar解码二维码和条形码示例
2014/02/07 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python数据结构之图的应用示例
2018/05/11 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
用python对excel查重
2020/12/07 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
安全员岗位职责
2013/11/11 职场文书
英文简历自荐信范文
2013/12/11 职场文书
计生个人工作总结
2015/02/28 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python