el-input 失去焦点事件

最新推荐文章于 2025-05-25 17:04:35 发布

原创最新推荐文章于 2025-05-25 17:04:35 发布 · 4.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html5

element-ui 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在Vue项目中如何处理el-input组件失去焦点的事件，包括在HTML结构、JavaScript事件监听以及如何调用外部验证方法的详细步骤。

1、html

 <div class="main_item__edit"
            v-if="[32, 512].includes(handleParams.handleType)">
            <label class="required">通知电话</label>
            <el-input v-model="handleParams.phone"
              minlength="3"
              maxlength="20"
              @blur="phoneChange($event)"
              type="number"></el-input>
 </div>

2、js

    phoneChange(e) {
      console.log("e", e.currentTarget.value);
      const { phone, handleType, handler } = this.handleParams;
      if ([32, 512].includes(handleType) && !phoneFun(phone)) {
        this.$message.warning("请输入正确的通知电话");
        return false;
      }
    },

在这里插入图片描述

3、引入外部验证方法

import { phoneFun } from '@/utils/index';

在这里插入图片描述

export function phoneFun(phones) {
   //   var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
   var myreg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
   if (!myreg.test(phones)) {
      console.log('手机号格式不正确');
      return false;
   } else {
      console.log('手机号格式正确');
      return true;
   }
}