el-input的输入内容校验及限制字符输入

在Vue.js中，使用Element UI库的el-input组件时，可以通过以下方式实现输入内容的验证和字符限制：

1. 使用v-model进行数据绑定。
2. 使用@blur事件处理器实现输入内容的验证。
3. 使用maxlength属性限制字符输入的最大长度。

以下是一个简单的例子，演示了如何对el-input进行验证和字符限制：

<template>
  <el-input
    v-model="inputValue"
    :maxlength="10"
    @blur="handleBlur"
  ></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleBlur() {
      // 这里可以添加更复杂的验证逻辑
      if (this.inputValue.trim() === '') {
        this.$message.error('输入内容不能为空');
      }
    }
  }
};
</script>

在这个例子中，inputValue是绑定到el-input的数据，:maxlength="10"限制了输入长度最多为10个字符，@blur="handleBlur"在输入框失去焦点时触发验证函数。如果输入的内容为空或者超出长度，会使用Element UI的$message.error方法显示错误信息。