当前位置：首页 > 前端教程

elementui maxlength

2026-03-05 23:52:50前端教程

关于 Element UI 的 maxlength 属性

Element UI 的 maxlength 属性用于限制输入框或文本域的最大字符长度。该属性适用于 el-input 和 el-input-number 组件，能够帮助开发者控制用户输入的内容长度。

在 el-input 中使用 maxlength

el-input 组件通过 maxlength 属性直接限制输入字符数。当用户输入的字符数超过设定值时，输入框会阻止继续输入并显示剩余可输入字符数（需配合 show-word-limit 属性）。

elementui maxlength

<el-input 
  v-model="inputValue" 
  maxlength="10" 
  show-word-limit 
  placeholder="最多输入10个字符">
</el-input>

maxlength="10"：限制输入框最多接受 10 个字符。
show-word-limit：显示当前已输入字符数和最大限制（如 0/10）。

在 el-input-number 中使用 maxlength

el-input-number 组件通常用于数字输入，其长度限制可通过 :controls="false" 禁用增减按钮并结合原生 maxlength 实现。

elementui maxlength

<el-input-number 
  v-model="numValue" 
  :controls="false" 
  maxlength="5">
</el-input-number>

动态绑定 maxlength

maxlength 支持动态绑定，可以根据业务逻辑调整限制值。

<el-input 
  v-model="dynamicInput" 
  :maxlength="maxLength" 
  show-word-limit>
</el-input>

data() {
  return {
    dynamicInput: '',
    maxLength: 20
  };
}

注意事项

maxlength 对中文字符的处理：一个中文字符计为 1 个长度单位。
输入限制仅在用户交互时触发，程序直接修改 v-model 绑定的值不会触发校验。
若需更复杂的校验（如字节长度限制），建议结合自定义校验规则实现。

自定义校验示例

以下代码实现字节长度校验（1个中文字符占2字节）：

<el-input 
  v-model="customInput" 
  placeholder="按字节限制长度">
</el-input>

data() {
  return {
    customInput: ''
  };
},
watch: {
  customInput(newVal) {
    const byteLength = newVal.replace(/[^\x00-\xff]/g, '').length;
    if (byteLength > 20) {
      this.$message.warning('超出字节长度限制');
      this.customInput = newVal.slice(0, -1);
    }
  }
}