解决 el-form 异步校验导致重复校验的问题

最新推荐文章于 2025-05-20 17:59:56 发布

白菜new

最新推荐文章于 2025-05-20 17:59:56 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue element-ui 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_43850819/article/details/108004012

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

element-ui

5 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的el-form异步校验导致的重复校验问题。当用户在输入验证码后未移出焦点直接点击确认时，由于异步校验，会触发两次校验，影响用户体验。解决方案是通过watch监听表单验证码输入框的值，当输入长度达到6时自动触发验证，避免了重复校验。

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

解决 el-form 异步校验导致重复校验的问题

业务逻辑

最近项目上有个业务，确认表单，需要用到手机验证码，验证是否为本人操作。这挺常见的，但是需要用户填写完，输入框失去焦点时就将验证码发送后台进行验证，而且验证码只能输一次。

触发场景

若用户输入完验证码后，鼠标焦点并未离开，直接点击确认的话，因为 validator 异步的关系，鼠标离开焦点触发一次校验，确认也触发一次校验，导致重复校验，用户体验极差

解决办法

用watch 动态监听 form 表单里验证码输入框的值，并进行相应判断，输入长度为6时自动触发验证

<template>
	<el-form ref="form" :model="form" :rules="rules" label-width="160px" label-suffix=" :">
		<el-form-item label="手机验证码" prop="sms" :rules="{ validator : sms , required : true , trigger : 'blur'}" key="sms">
            	<!-- 验证码输入框 -->
                <el-input v-model="form.sms"  maxlength="6" show-word-limit/>
            	<!-- 发送验证码组件 -->
                <simple-sms  :api="POST_DSP_SEND" />
            </el-form-item>
	</el-form>
</template>

<script>
watch : {
	'form.sms': function (val) { //单个数据验证
  		if(val!= undefined && val.length == 6){
    		this.validateField('sms')
  		}
	}
} ,
methods : {
	//表单单项验证
    validateField(fieldName) {
      this.$refs.form.validateField(fieldName)
    } ,
    // 验证码验证
    sms(r , v , c) {
      if (!v) {
        return c(new Error('请输入验证码'))
      } else if (this.validPass){  // validPass 字段代表验证成功
        c()
      }
      if(!this.loading){
        this.loading = true
        http.post(this.POST_DSP_VERIFY, {code: v}).then(() => {
          // 验证成功
          this.validPass = true
          return c()
        }).catch(() => {
          return c(new Error('请输入正确验证码'))
        }).finally(()=>{
          // 按钮启用
          this.loading = false
        })
      }
    },
}
</script>