欢迎来到[自学php网] ①群 287460651

主页 > 前端 > vue教程 >

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

来源:自学PHP网    时间:2019-07-23 15:24 作者:小飞侠

[导读] 详解element-ui设置下拉选择切换必填和非必填...

? 需求? 初始校验规则

rules: {
  name: [
    { required: true, message: "请输入名称", trigger: "blur" }
  ],
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}? 解决方案
rules: {
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}的form-item为新字段,根据下拉框选择的值来决定是为true

  


  
字段重新加回去rules
rules: {
  name: [{ validator: validateName }],
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}
 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代码



以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学php网。

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com