InputOtp 一次性密码输入

在 Form 的列配置中，将 type 设置为 otp 或 input-otp，即可使用一次性密码输入框。

基础用法

效果预览可直接操作下方示例

通过 length 设置输入格数量，validator 可限制每个输入字符。

正在加载示例…

<template>
  <p class="input-otp-form__value">当前验证码：{{ form.otp || '未输入' }}</p>
  <avue-form v-model="form" :option="option" @submit="handleSubmit" />
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({ otp: '' });
const isNumber = (value) => /^\d$/.test(value);

const option = {
  submitText: '校验验证码',
  emptyText: '清空',
  column: [
    {
      label: '短信验证码',
      prop: 'otp',
      type: 'otp',
      length: 6,
      inputmode: 'numeric',
      validator: isNumber,
      rules: [{ required: true, message: '请输入 6 位验证码', trigger: 'blur' }],
      finish: ({ value }) => ElMessage.success(`输入完成：${value}`),
    },
  ],
};

const handleSubmit = (value, done) => {
  ElMessage.success(`校验通过：${value.otp}`);
  done();
};
</script>

<style scoped>
.input-otp-form__value {
  margin-bottom: 12px;
  color: var(--el-text-color-secondary);
}
</style>

掩码、外观与分隔符

效果预览可直接操作下方示例

使用 otpType 切换外观；mask 隐藏输入内容，separator 在输入格之间显示分隔符。

正在加载示例…

<template>
  <avue-form v-model="form" :option="option" />
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({ loginOtp: '', paymentOtp: '' });
const isNumber = (value) => /^\d$/.test(value);

const option = {
  submitBtn: false,
  emptyBtn: false,
  column: [
    {
      label: '登录验证码',
      prop: 'loginOtp',
      type: 'input-otp',
      length: 4,
      otpType: 'filled',
      inputmode: 'numeric',
      validator: isNumber,
      finish: ({ value }) => ElMessage.success(`登录验证码：${value}`),
    },
    {
      label: '支付密码',
      prop: 'paymentOtp',
      type: 'otp',
      length: 6,
      otpType: 'underlined',
      mask: true,
      separator: '-',
      inputmode: 'numeric',
      validator: isNumber,
      finish: ({ value }) => ElMessage.success(`支付密码输入完成：${value}`),
    },
  ],
};
</script>

动态禁用、只读与重新填写

效果预览可直接操作下方示例

OTP 字段可根据业务状态切换为禁用或只读，也可在重新发送验证码后清空当前输入。

正在加载示例…

<template>
  <el-space wrap class="input-otp-status__actions">
    <el-button type="primary" @click="resend">重新发送验证码</el-button>
    <el-switch v-model="column.disabled" active-text="禁用" />
    <el-switch v-model="column.readonly" active-text="只读" />
  </el-space>
  <p class="input-otp-status__tip">{{ tip }}</p>
  <avue-form v-model="form" :option="option" />
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({ otp: '' });
const isNumber = (value) => /^\d$/.test(value);
const column = reactive({
  label: '短信验证码',
  prop: 'otp',
  type: 'otp',
  length: 6,
  inputmode: 'numeric',
  validator: isNumber,
  disabled: false,
  readonly: false,
  finish: ({ value }) => ElMessage.success(`验证码输入完成：${value}`),
});
const option = reactive({
  submitBtn: false,
  emptyBtn: false,
  column: [column],
});
const tip = ref('验证码有效期为 5 分钟');

const resend = () => {
  form.value.otp = '';
  tip.value = '验证码已重新发送，请重新填写';
  ElMessage.success('验证码已重新发送');
};
</script>

<style scoped>
.input-otp-status__actions {
  margin-bottom: 8px;
}

.input-otp-status__tip {
  margin-bottom: 12px;
  color: var(--el-text-color-secondary);
}
</style>

字母数字验证码

效果预览可直接操作下方示例

除了短信验证码，也可用于邀请码、设备验证码等字母数字混合场景。

正在加载示例…

<template>
  <p class="input-otp-alphanumeric__tip">请输入 8 位大写字母或数字的邀请码。</p>
  <avue-form v-model="form" :option="option" @submit="handleSubmit" />
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({ inviteCode: '' });
const isUppercaseLetterOrNumber = (value) => /^[A-Z0-9]$/.test(value);

const option = {
  submitText: '验证邀请码',
  emptyText: '清空',
  column: [
    {
      label: '邀请码',
      prop: 'inviteCode',
      type: 'input-otp',
      length: 8,
      otpType: 'underlined',
      separator: '·',
      inputmode: 'text',
      validator: isUppercaseLetterOrNumber,
      rules: [
        { required: true, message: '请输入邀请码', trigger: 'blur' },
        { pattern: /^[A-Z0-9]{8}$/, message: '邀请码为 8 位大写字母或数字', trigger: 'blur' },
      ],
      finish: ({ value }) => ElMessage.success(`邀请码输入完成：${value}`),
    },
  ],
};

const handleSubmit = (value, done) => {
  ElMessage.success(`邀请码验证通过：${value.inviteCode}`);
  done();
};
</script>

<style scoped>
.input-otp-alphanumeric__tip {
  margin-bottom: 12px;
  color: var(--el-text-color-secondary);
}
</style>

常用配置

参数	说明	类型	默认值
type	字段类型	string	otp
length	输入格数量	number	6
validator	单个字符校验函数	function	-
inputmode	原生输入模式	string	-
otpType	输入框外观	string	outlined
mask	是否掩码显示	boolean	false
separator	分隔符	string / object / function	-
validateEvent	是否触发表单校验	boolean	true
finish	输入完成回调	function	-

更多组件属性与实例方法请参考 InputOtp 组件文档。