element ui表单必填_详解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" }
]
}
第二步:
在字段为name的form-item上,添加required属性
下面代码isHaveTo为新字段,根据下拉框选择的值来决定是为true还是false
第三步:
计算属性,新增字段isHaveTo
下拉选择框非必须是为1,其他都是必填,包括默认
效果如图:
下拉切换,*号显隐,提交时也有不同规则
注意,新的问题来了
在选择必填时,没有了之前的错误提示文字,而是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
核心代码参考如下:
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
立即创建
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;
}
});
}
}
};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
element ui表单必填_详解element-ui设置下拉选择切换必填和非必填相关推荐
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- 详解element-ui设置下拉选择切换必填和非必填
<template><div><el-form:model="ruleForm":rules="rules"ref="r ...
- layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
- php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
- Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
- python命令提示符窗口在哪里_详解python命令提示符窗口下如何运行python脚本
以arcgispro的python脚本为例在arcgispro自带的python窗口下运行python脚本 需求: 将arcgispro的.aprx项目包中gdb的数据源路径更换为sde数据源路径. ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- createform用法_vue自定义表单生成器form-create使用详解
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- HTML表单的enctype属性详解{转}
用Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对.这是标准的编码格式 ...
- php ci框架 自动验证,CodeIgniter表单验证方法实例详解
本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform ...
最新文章
- JavaScript导出Excel通用代码。
- linux ssh命令 带密码,[命令] Linux 命令 sshpass(密码非交互式 ssh)(转载)
- 【2012百度之星 / 资格赛】I:地图的省钱计划
- react 设计模式与最佳实践
- 教务管理及教材订购系统设计文档
- 搭建spring MVC项目
- 实验三:shell编程(1)
- Spring学习之旅(三)之运行值时注入
- 判断字符串格式_Python基础教程,第四讲,字符串详解
- zabbix_server
- 虚幻4随笔(安装与界面说明)
- 请教淘宝API sign签名问题,望高人指点!谢谢!
- linux ping结果中mdev,ping之mdev值
- 西安电子科技大学通院811电院821考研上岸经验分享(一)
- 我的时间管理及未来两年IT规划
- 泛函分析和他的基础概念
- 深入浅出之dtype( )和astype( )函数
- ETCD 简介及基本用法
- STL容器系列文章:array容器
- Graph Representation Learning 笔记 Ch1Ch2