ElementUI 表单单个验证

今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填

实例图

如果区域选择的是北京,则只要填写前三项就可以,
如果区域选择的是上海或者不选,则校验的是全部
如下图

解决方法

方案一
简单粗暴,好实现,技术含量低
直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单.
方案二
elementUI官方在表单校验文档中已经说明,取消单个校验的方法
结合这个方法使用Promise.all校验,如果最后的数量为0则表示校验通过
ElementUI官网地址

代码如下

<template lang=""><div><el-card class="box-card" style="width: 750px;margin: auto;"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="上海" value="上海"></el-option><el-option label="北京" value="北京"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-pickertype="date"placeholder="选择日期"v-model="ruleForm.date1"style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-pickerplaceholder="选择时间"v-model="ruleForm.date2"style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></el-card></div>
</template>
<script>
export default {data() {return {ruleForm: {name: "",region: "",date1: "",date2: "",delivery: false,type: [],resource: "",desc: ""},rules: {name: [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }],region: [{ required: true, message: "请选择活动区域", trigger: "change" }],date1: [{type: "date",required: true,message: "请选择日期",trigger: "change"}],date2: [{type: "date",required: true,message: "请选择时间",trigger: "change"}],type: [{type: "array",required: true,message: "请至少选择一个活动性质",trigger: "change"}],resource: [{ required: true, message: "请选择活动资源", trigger: "change" }],desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]}};},watch: {"ruleForm.region"(val) {// 如果从上海切换到北京,移除之前的校验if (val === "北京") {this.$refs["ruleForm"].clearValidate("type");this.$refs["ruleForm"].clearValidate("resource");this.$refs["ruleForm"].clearValidate("desc");}}},methods: {submitForm(formName) {let _this = this;// 如果活动区域选择和上海则全部校验,否则只校验前三个let vaitalArr = ["name", "region", "date1", "date2", "delivery"];if (this.ruleForm.region === "上海" || this.ruleForm.region === '' ) {let str = ["type", "resource", "desc"];vaitalArr = vaitalArr.concat(str);}Promise.all(vaitalArr.map(item => {const p = new Promise((resolve, reject) => {_this.$refs.ruleForm.validateField(item, vaild => {resolve(vaild);});});return p;})).then(results => {// 表单校验通过results = results.filter(item => item);if (!results.length) {alert("校验通过");}});},resetForm(formName) {this.$refs[formName].resetFields();}}
};
</script>
<style scoped>
</style>

ElementUI 表单单个验证相关推荐

elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
elementUI表单验证
elementUI表单验证注意: el-form中要有::model=" " :rules=" " el-form-item要有:prop 如果点击提交时也启 ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
element-ui表单验证
情景我想利用饿了么框架实现表单验证 http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan 但是我的form里面的model和 ...
VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）
步骤: 封装验证规则: export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2 ...
关于elementUI表单的清除验证以及复合型输入框
目录一.清除表单的验证问题的发生以及解决过程代码总结二.复合型输入框--查询(前置和后置都有的) 问题的发生以及解决过程代码展示一.清除表单的验证问题的发生以及解决过程表单弹窗关闭 ...
前端学习（1908）vue之电商管理系统电商系统之渲染修改用户的表单预先验证
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
在ASP.NET中如何用C#.NET实现基于表单的验证
这篇文章引用到了Microsoft .NET类库中的以下名空间: System.Data.SqlClient System.Web.Security ------------------------- ...
数据验证html,JavaScript 表单数据验证
JavaScript 表单 HTML 表单验证可以通过 JavaScript 来完成. HTML 表单验证也可以通过浏览器来自动完成. 如果表单字段 (fname) 的值为空, required 属性 ...

ElementUI 表单单个验证

ElementUI 表单单个验证

实例图

解决方法

ElementUI 表单单个验证相关推荐

最新文章

热门文章