美文网首页
表单校验同级重复名称问题

表单校验同级重复名称问题

作者: 沃德麻鸭 | 来源:发表于2021-09-07 16:17 被阅读0次

出现场景

 人力资源类项目中一般都会有上下级关系,这时对于职称的命名也就会有讲究,比如,一个工程,不可能会同时出现两个项目经理,这时在做职位安排时,就只能安排一个职位用来放项目经理对应的位置,而项目经理下面又分有很多个部门,比如预算,安全,生产等等,但是这些职位都是平级关系,并且一个项目也不能同时有两个生产部门,这里就涉及到同级名称不能重复的问题

在进行添加功能操作的时候,需要对表单进行自定义校验:同级名称不重复

首先第一步就是获取到所有的同级名称,这里不能直接使用之前获取列表用来渲染table表格的那个数组,因为那个数组中的数据用来渲染表格了,过滤这个数组只能得到当前页的符合条件的数据,不能筛选出所有的,这时就需要重新声明一个变量用来接收接口获取到的数据,专门用来做数据筛选

获取源数组

 自定义校验

自定义校验

要分两种情况进行筛选,添加状态下,只需要正常筛选,用filter()方法遍历出所有相同上级的兄弟名称的项,然后通过map方法,只留下每一项的name并返回数组,进行对输入框的数据(value)进行包含判断。

编辑状态下,需要在筛选找出所有兄弟name的前提下,将自己的名字也剔除在外,之后再进行包含判断。

这里的自己是双向绑定,所以输入发生更改,名字数组也会实时跟着变化,所以主要声明一个变量,用来专门对输入框的name 进行保存,在数据回填的同时进行赋值,然后只要判断获得的名字数组中不包含这个回填的数据尽可以了,这个数据只有在点击修改才会触发更改,所以不关闭弹框并且重新打开就不会使这个变量的值更改。

变量保存回填name值

相关文章

  • 表单校验同级重复名称问题

    出现场景 人力资源类项目中一般都会有上下级关系,这时对于职称的命名也就会有讲究,比如,一个工程,不可能会同时出现两...

  • 表单校验,正则,部分

    1.校验表单中某几项 1.type、brandName为rules定义的名称(表单内容prop名称) 2.校验常用...

  • 自定义校验(同级不重复问题)

    首先code是唯一的前提下,不用考虑同级问题 校验code const validCode = (rule, va...

  • elementUI踩坑

    ElementUI 表单校验没反应的问题 因为同一页面下写了多个表单,我需要对所有表单都进行校验无误后再向后台发起...

  • Element-UI表单验证

    校验规则 表单通过rules属性绑定校验规则对象,表单项通过prop属性绑定具体校验规则 注意校验的字段必须和表单...

  • el-table与el-form同用,并校验

    效果图 这里是以添加商品内容为案例,上面的名称就是正常的form表单校验。下面的内容详情的输入校验

  • element ui使用v-for循环form表单校验的实现

    问题描述 在项目开发中,我们经常会遇到表单保存的功能,在表单保存前,常常需要做表单必填项的校验,校验通过以后才去发...

  • ajax 异步请求

    1.存在的一些问题? 注册的时候,很多时候需要校验用户名是否重复,如果重复则不让注册。我们之前的做法是提交表单之后...

  • voltType is not a string

    el-form表单校验时报错 项目需求要对输入的表单内容进行类型和长度校验,其他格式都没问题,唯独是数字类型和长度...

  • vue3 二次封装el-form表单

    二次封装el-form,理由无非就是多个地方用同一个表单,懒得重复写校验。 表单组件 组件的使用

网友评论

      本文标题:表单校验同级重复名称问题

      本文链接:https://www.haomeiwen.com/subject/hrociltx.html