element表单校验--老先生

最新推荐文章于 2025-04-27 11:20:40 发布

原创最新推荐文章于 2025-04-27 11:20:40 发布 · 785 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

VUE 同时被 2 个专栏收录

12 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍了使用Element UI中表单校验的功能，包括整体校验方法validate、重置表单resetFields及清除校验结果clearValidate等常用操作。文中还提到了作者在实践中遇到的问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element表单校验

tip1：

this.$refs[formName].validate()：

validate

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。这个是帮助实现表单校验的函数。

之前校验结果不清除的bug，加个clear函数，里面内容

this.$nextTick(() =>{
    this.$refs['form'].resetFields()
    this.$refs['form'].clearValidate()
    this.form.fieldLength = this.form.fieldDesc = ''
  })

resetFields

对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

clearValidate

移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果

今日完成

今天把所有的校验做完了，有部分校验是无法用注解就用了判断，这个影响不大。表单校验无法清除的bug也解决了，不过之前想要同时显示券码库的id和name这个想不出来怎么做，学姐提出用map，但因为用了map除了建立映射需要改的太多，在框里面的显示也会没法排版，所以这个还是不做了。之后再遇到什么好的解决思路再去做吧。

今天又找了四个地方有bug和不理解的逻辑，有的类库没见过，明天就整理一下这部分的逻辑，已得到导师同意。