记录一次解决uniapp自定义验证框的bug过程

**解决 UniApp 自定义验证框 Bug 的经历**

作为一个开发者，遇到 bug 是不可避免的。最近，我遇到了一个在 UniApp 中使用自定义验证框时出现的问题。在这篇文章中，我将记录一下我是如何解决这个问题的。

**背景**

我们正在开发一个移动应用程序，需要实现用户输入的验证功能。为了实现这一点，我们决定使用 UniApp 的自定义验证框组件。这个组件允许我们根据需求创建各种类型的验证规则。

**问题描述**

当我们尝试在表单中使用自定义验证框时，发现它会导致应用程序崩溃。错误信息提示说是由于 "undefined" 引起的。但是，我们并没有在代码中使用这个关键字。

**初步检查**

首先，我检查了 UniApp 的文档和示例代码，看看是否有任何相关信息。然而，找到的信息似乎与我们的问题无关。

接下来，我检查了我们项目中的所有相关代码，包括自定义验证框组件的实现。但是，没有发现任何明显的错误。

**调试**

由于初步检查没有结果，我决定使用 UniApp 的调试工具来一步一步地分析程序执行过程。通过设置断点和查看变量值，我逐渐缩小了问题的范围。

经过一番努力，我终于找到了问题所在：自定义验证框组件的 `onInput`事件处理函数中，存在一个错误的属性引用。

**修复**

修复这个 bug 非常简单。只需更正一下属性引用就可以了。具体来说，我们需要从 `this.$refs` 中取出正确的属性名。

javascript// 错误的代码onInput(event) {
 const { value } = event.target;
 this.$refs.input.value = value; // 错误的属性引用}

// 正确的代码onInput(event) {
 const { value } = event.target;
 this.$refs.customInput.value = value; // 正确的属性引用}