vue中element组件input失去焦点事件使用

可以通过在input标签上添加@blur事件来实现失去焦点的触发，代码如下：

<el-input v-model="inputValue" @blur="handleBlur"></el-input>

methods: {
  handleBlur() {
    console.log('失去焦点！');
    // 具体操作...
  }
}

相关问题

vue3使用element表单校验

1. 引入 element-plus 库

import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

2. 在 template 中使用表单组件

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

3. 在 script 中定义表单数据、校验规则和提交方法

<script>
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  name: 'FormDemo',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 校验通过，提交表单
          console.log('submit form:', this.form);
        } else {
          // 校验不通过，提示用户
          console.log('validate failed');
        }
      })
    }
  }
}
</script>

4. 在 methods 中定义 submitForm 方法，使用 $refs.form.validate() 方法校验表单数据。如果校验通过，则提交表单数据；如果校验不通过，则提示用户。

5. 在校验规则中，可以设置多个校验规则。每个规则都包含三个属性：required 表示是否必填，message 表示校验不通过时的提示信息，trigger 表示触发校验的事件。常用的触发事件有 blur（失去焦点时校验）和 change（值改变时校验）。

6. 注意：在 Vue 3 中，必须使用 v-model 指令绑定表单数据，不能使用 v-bind:value 和 v-on:input，否则校验不会生效。

element-ui中el-input的验证

element-ui中的el-input组件提供了验证输入的功能。你可以通过设置el-input的属性和监听事件来实现验证。

首先，你可以使用`v-model`指令绑定输入框的值到一个变量上，例如：

<el-input v-model="inputValue"></el-input>

然后，你可以使用`rules`属性来设置验证规则，例如：

<el-input v-model="inputValue" :rules="inputRules"></el-input>

在你的Vue组件的`data`中定义`inputRules`变量，例如：

data() {
  return {
    inputValue: '',
    inputRules: [
      { required: true, message: '请输入内容', trigger: 'blur' },
      // 其他验证规则...
    ]
  }
}

上述代码中，我们定义了一个必填的验证规则，当输入框失去焦点时触发验证。

如果你想在提交表单时进行统一的验证，你可以使用`validate`方法：

<el-form ref="form" :rules="formRules">
  <el-input v-model="inputValue" name="inputValue"></el-input>
  <!-- 其他表单项... -->
  <el-button @click="submitForm">提交</el-button>
</el-form>

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单验证通过，执行提交逻辑
      } else {
        // 表单验证不通过
      }
    })
  }
}

上述代码中，我们使用`validate`方法来执行表单验证，如果验证通过，`valid`参数为`true`，否则为`false`。

这只是element-ui中el-input的验证的基本用法，你还可以根据需求定制更复杂的验证规则和错误提示。你可以参考element-ui官方文档中关于表单验证的部分来了解更多详细的用法和选项。