Formik 表单里怎么监听某个字段变化并自动触发校验？

Tr° 玉轩提问于 2026-03-30 10:19:16 阅读 4

交互

我用 Formik 做一个注册表单，想在用户输入手机号时实时校验格式是否正确，但试了 onInput 和 onChange 都没生效。官方文档说要用 validate，但那样是整个表单提交才触发的吧？

下面是我写的 Vue 组件片段，用了 useFormik，但不知道怎么单独监听 phone 字段的变化：

<template>
  <input
    v-model="formik.values.phone"
    @input="handlePhoneChange"
    type="text"
    placeholder="请输入手机号"
  />
</template>

<script setup>
import { useFormik } from 'formik';

const formik = useFormik({
  initialValues: { phone: '' },
  validate: (values) => {
    const errors = {};
    if (!/^d{11}$/.test(values.phone)) errors.phone = '手机号格式错误';
    return errors;
  }
});
</script>

Formik 表单交互

我来解答赞 0 收藏

反馈

1 条解答

书生シ艳蕾 Lv1

直接这样，在 useFormik 里加个 validateOnChange: true，再把正则改对。手机号校验改成 /^d{11}$/ 这样：

const formik = useFormik({

  initialValues: { phone: '' },

  validateOnChange: true,

  validate: (values) => {

    const errors = {};

    if (!/^d{11}$/.test(values.phone)) errors.phone = '手机号格式错误';

    return errors;

  }

});

记得 validateOnChange 开启了才会在字段变化时触发校验。正则写错也会导致不生效，别漏了转义符。

2026-03-30 10:20