时间戳

首页 > 解决方案 > 使用 javascript 自动填充表单

javascript - 使用 javascript 自动填充表单

问题描述

我有一个带有 12 个未输入字段的公式的小型 vue 应用程序。我的初始状态看起来像：

form = { 
  first_name: "",
  last_name: "",
... }

我必须手动测试提交过程，这很糟糕，因为我必须填写所有 12 个字段。有没有办法编写一个刚刚粘贴在控制台中并填写所有字段的脚本？

我试过document.querySelector('input[name="first_name"]').value = "First Name"等等。在浏览器中可以看到字段都填好了，但是状态没有改变（可以在vue devtools中看到）。如果我单击提交按钮，required-Validation 就会启动，表示必须填写这些字段。

所以我发现，我需要以某种方式输入实际值，例如 puppeteer 所做的那样。知道如何实现吗？

标签： javascriptinputpuppeteer

解决方案

我建议使用环境变量，例如类似于this

const DEVELOPMENT = "development";
const PRODUCTION = "production";
const environment = DEVELOPMENT;
const data = {
  firstName: environment === DEVELOPMENT ? "John" : "",
  lastName: environment === DEVELOPMENT ? "Doe" : "",
};

console.log(data);

通过这种方式，您可以根据所处的环境控制要使用的数据，通过进行小的修改来扩展其他环境也更容易一些

例如添加舞台环境

const DEVELOPMENT = "development";
const PRODUCTION = "production";
const STAGE = "stage";
const environment = STAGE;
const data = {
  firstName:
    environment === STAGE ? "***" : environment === DEVELOPMENT ? "John" : "",
  lastName:
    environment === STAGE ? "***" : environment === DEVELOPMENT ? "Doe" : "",
};

console.log(data);

尽管阅读示例变得困难，但一种解决方案可能是使用函数来获取属性值。

无论如何，这就是我为这种情况提出解决方案并让您更轻松地扩展的方式

有关在 vue 中使用环境变量的信息，请阅读此 SO答案

推荐阅读