表单交互实战：登录事件与数据传递

大家好，我是小多，欢迎回到登录表单课程。在上一节课中，我们学习了如何创建和设置表单的基本元素，但我们的登录表单还没有实现交互功能。今天，我们将给这个登录表单增加一个表单事件，使其能够响应用户的操作，以便在低代码开发中更灵活地控制表单的行为。那么，我们现在就开始吧！

表单交互实战：登录事件与数据传递

首先，我们打开多八多应用市场中上一课的应用源码，找到我们的登录表单。你会发现一个“登录”按钮，但是现在点击它没有任何反应。这是因为我们还没有给表单设置一个事件接收。通过这个事件接收，会返回表单的数据。在设置之前，我们需要给这些表单项增加“name”，也就是它们的字段名。

在大纲视图中可以直接右键编辑，也可以双击，还可以直接在界面上右键然后编辑，你可以选择你觉得最方便的方式。我们把用户名字段指定为“用户名”，密码字段指定为“密码”。

设置完成后，我们暂时关闭其他多余的选项。现在，我们要给表单绑定一个事件。

我们先在前台函数这里创建一个新的JS函数，叫做“登录处理”。然后，我们在表单这里添加这个函数的调用，选择“调用函数”，把刚才创建的JS函数传递给这个表单的提交事件。这样，它们之间就建立了连线。

现在，我们来简单编辑一下这个“登录处理”。我们可以先放一个消息提示，比如“设置成功”。然后，我们开始和结束连线。现在默认的情况下是成功的，但是信息是空的。

接下来，我们将会尝试进行登录操作。目前，当点击登录按钮时，相应的提示信息已经能够正常显示。下一步，我们需要将表单数据传递出去。在这里，我们选择将消息内容转化成一个参数，这个参数可以通过函数的形式进行传递。为了能在前台看到这个参数，我们将其转换为json字符串。

现在，让我们尝试一下这个操作。你看到的应该是一个空的json对象。接下来，我们在用户名这一栏输入admin，密码输入123123。当点击登录时，你应该能看到用户名为admin，密码为123123的显示结果。

回顾一下我们今天的操作步骤：首先，我们设置了登录按钮的类型为submit，即提交类型。接着，为这两个表单项设置了各自的字段名称，分别是用户名和密码。最后，新建了一个名为登录处理的js函数，其中包含了一个显示成功消息的流程，并将这个参数通过json.stringify转换为字符串形式。此外，在表单中添加了这个函数的引用，并将其传给了表单的提交处理回调函数。这样，我们就完成了上述步骤。

利用多八多AI应用开发助手提供的各种可视化组件和流程图生成代码功能,我们只需要几步的操作就可以实现表单交互和事件触发,是不是非常简单呢?

OK,到这里我们就完成了登录功能的开发。第三课我会教大家连接后端服务,真正实现前后端数据交互。如果有任何疑问或建议请随时联系我哦！感谢大家的收看,我是小多,我们下一课见!