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

junbaor 发布于2019-08-23 18:09 / 599人阅读

摘要：需求默认都是必选下拉选择的时候选择必填，活动名称为必填，需要校验和显示选择非必填，活动名称不做校验，隐藏初始校验规则经测试，网上其他的方式都没有实现需求，动态切换中的没有作用因为按照以下的写法的话，在组件初始化后校验规则就定型了，切换也没

➢ 需求

默认都是必选

下拉选择的时候

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

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

➢ 初始校验规则

经测试，网上其他的方式都没有实现需求，动态切换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" }
    ]
}

第二步：

在字段为name的form-item上，添加required属性

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

第三步：

计算属性，新增字段isHaveTo

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

computed: {
    isHaveTo: function() {
        return this.ruleForm.region === `0`;
    }
},

效果如图：

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

注意，新的问题来了

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

第四步：

设置错误提示

使用自定义函数控制流程

把name字段重新加回去rules

注意是函数{ validator: validateName }

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

然后设置函数validateName

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

贴上代码

 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

核心代码参考如下：

云服务器服务器托管 js验证表单非必填项必填项必填 html必填

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104741.html

手机端简洁日历控件iantoo.week()

摘要：主要是为了避免用户修改了手机日历之后，获取的本地与服务器时间不统一可以通过获取服务器时间进行手动设置。日历控件更新之后哦调用只有在调用了的时候才会被触发非必填。对于设备已经通过阻止冒泡事件进行控制不需要再做控制。原文链接使用引入文件: ./build/css/iantooweek.css ./build/js/iantooweek.js 并在页面上调用: iantoo.week(...

Wuv1Up 2019-08-26 12:09 评论0 收藏0
【容器实例 Cube】创建详解：快速创建教程

摘要：创建详解通过上面的快速创建我们接下来将通过上面的例子来进行创建操作中的详细设置说明。高阶设置高阶设置中将针对容器进行详细的参数设置。挂载路径卷名称注意如没有创建卷设置，在挂载卷中将选择不到具体的卷名称，请先创建卷设置。快速创建快速创建Cube实例点击Cube的创建按钮进入创建页面，为你的容器组起一个名字；选择一个仓库内的镜像，这里快速创建我选择的UCloud镜像仓库nginx镜像1.17.1...

Tecode 2022-06-28 19:00 评论0 收藏0
环形百分比控件iantoo.percent()

摘要：模块最终使用方法进行查找并自动添加为查找。百分比文字样式非必填默认。百分比文字大小会通过的值自动计算百分数的数字并添加百分号。百分比文字现实的颜色。原文链接使用引入文件: ./build/js/iantooPercent.js 并在页面执行 iantoo.percent({ el:iantooPercent }) 既可正常显示如下show...

impig33 2019-08-26 12:09 评论0 收藏0