Element UI 表单验证数字类型提示 "xx is not a string" 的终极解决方法

前端

2023-09-01 08:51:41

引子

在使用 Element UI 的过程中，很多开发者在表单验证时遇到了数字类型提示“xx is not a string”的困扰。本文将深入剖析此问题的根源，并提供针对性的解决方案，帮助开发者轻松解决此问题。

问题根源

此问题的根源在于 Element UI 表单验证规则中的一个未明确说明的细节。当使用 v-model.number 指令对数字类型字段进行校验时，如果校验规则中包含 target: 'blur'，则会出现上述提示。

解决方案

要解决此问题，需要移除校验规则中的 target: 'blur'。具体步骤如下：

在表单元素上找到相关的 v-model 指令，确保其包含 .number 后缀，如：<input v-model.number="form.age">。
在同一元素上找到相关的校验规则，如：<form-item label="年龄" prop="age">。
移除校验规则中的 target: 'blur'，如：<form-item label="年龄" prop="age" :rules="[...rule]">。

实例代码

以下是一个经过修改的实例代码：

<template>
  <form-item label="年龄" prop="age">
    <input v-model.number="form.age" />
    <div v-for="rule in rules" :key="rule.name">
      <span>{{ rule.message }}</span>
    </div>
  </form-item>
</template>
<script>
import { Form, FormItem } from 'element-ui';

export default {
  components: { Form, FormItem },
  data() {
    return {
      form: { age: '' },
      rules: [
        { required: true, message: '请输入年龄' },
        { type: 'number', message: '请输入正确的数字' }
      ]
    };
  }
};
</script>