vue项目中element-ui表单验证的坑

最新推荐文章于 2023-08-08 17:52:13 发布

哼切滚

最新推荐文章于 2023-08-08 17:52:13 发布

阅读量385

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qie1138159096/article/details/116264093

版权

本文探讨了一种前端表单验证中的问题，即用户删除输入内容后，表单验证会触发英文提示，并关注了如何处理不同字段的验证逻辑。同时，提及了表单组件中动态切换时验证提示的处理技巧，包括关键元素的唯一标识（key）。

摘要由CSDN通过智能技术生成

一、表单输入清空验证出现英文

在这里插入图片描述

输入框输入内容后再删除,表单验证生效出现英文

watch: {
    'form.commissionRate'(val) {
      this.$nextTick(() => {
        if (val == '') {
          this.$refs.four.validateField('commissionRate')
          this.form.commissionRate = ''
        }
      })
    },
    'form.bankAccount'(val) {
      this.$nextTick(() => {
        if (val == '') {
          this.$refs.four.validateField('bankAccount')
          this.form.bankAccount = ''
        }
      })
    },
    'form.accountNumber'(val) {
      this.$nextTick(() => {
        if (val == '') {
          this.$refs.four.validateField('accountNumber')
          this.form.accountNumber = ''
        }
      })
    },
    'form.openingBank'(val) {
      this.$nextTick(() => {
        if (val == '') {
          this.$refs.four.validateField('openingBank')
          this.form.openingBank = ''
        }
      })
    },
  },

使用watch监听部分表单字段进行校验的方法

二、当前表单内部切换后直接出现验证提示语

在这里插入图片描述

给 el-form-item 加上了 key, 指定了它的唯一性

<el-form-item label="机构名称:" required prop="name" v-if="form.type == '1'" :key="1">
   <el-input placeholder="请输入内容..." v-model.trim="form.name"></el-input>
</el-form-item>
<el-form-item label="姓名:" required v-if="form.type == '0'" prop="userName" :key="2">
   <el-input placeholder="请输入内容..." :maxlength="9"  v-model.trim="form.userName"></el-input>
</el-form-item>
<el-form-item label="社会信用代码:" required prop="creditCode" v-if="form.type == '1'" :key="3">
   <el-input placeholder="请输入内容..." v-model.trim="form.creditCode" @blur="getCheckCreditCode(form.creditCode)"></el-input>
</el-form-item>
<el-form-item label="身份证号码:" required v-if="form.type == '0'" prop="idCard" :key="4">
   <el-input placeholder="请输入内容..." :maxlength="18" v-model.trim="form.idCard"></el-input>
</el-form-item>