Element UI 表单校验输入值不超过10位

Element UI 提供了一套丰富的表单组件，其中的验证功能可以帮助我们在用户提交数据之前检查字段的内容是否符合预期规则。对于限制输入值不超过10位，你可以通过在 Vue.js 中配合 Element UI 的 `el-form` 和 `el-input` 组件使用自定义验证规则。

首先，你需要创建一个验证函数，比如 `validateLength`：

export default {
  methods: {
    validateLength(value) {
      return value && /^\d{1,10}$/.test(value); // 正则表达式匹配1到10位的数字
    }
  }
}

然后，在表单组件模板中，将这个验证函数绑定到 `max-length` 属性上：

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="数值输入" prop="inputValue">
      <el-input v-model.number="inputValue" maxlength="10" :rules="{ max: 'validateLength(inputValue)' }"></el-input>
    </el-form-item>
  </el-form>
</template>

这里，`:rules="{ max: 'validateLength(inputValue)' }"` 将验证函数应用到了输入框，当用户输入超过10位的数字时，表单验证会失败，提示错误信息。