我的自动填充字段未在 Vue.js 中验证

Question

对于我的大学项目，我正在创建一个 NFT 激励计划。 注册用户时，他们必须输入名字、用户名、密码等和钱包地址。 为了便于使用，我添加了一个“连接”按钮来将用户 MetaMask 钱包连接到网站。 完成后，connect 方法连接 MetaMask 并返回钱包地址。 此外，“walletAdd”元素正在自动填充以包含返回的钱包地址。 forms 验证不会立即识别此自动填充值，该验证正在通过“yup”验证进行验证。 在接受字段值之前，我必须单击该字段并进行任何更改，例如删除并重新插入钱包地址的最后一个字符。 请在下面查看我的代码并帮助我了解如何让表单接受自动填充的值。

该系统使用 VueJs 和 Spring 构建。 function连接如下：

async connect() {
  if (window.ethereum) {

    await window.ethereum.request({ method: "eth_requestAccounts" }).then(accounts=>{
      let account = accounts[0];
      console.log(account);
      document.getElementById("walletAdd").value = account.toString();
    });
    window.web3 = new Web3(window.ethereum);
  } else {
    console.log("No wallet");
  }
}

这是数据验证的代码

data() {
  const schema = yup.object().shape({
    username: yup
        .string()
        .required("Username is required!")
        .min(3, "Must be at least 3 characters!")
        .max(20, "Must be maximum 20 characters!"),
    firstName: yup
        .string()
        .required("First Name is required!")
        .min(3, "Must be at least 3 characters!")
        .max(20, "Must be maximum 20 characters!"),
    lastName: yup
        .string()
        .required("Last Name is required!")
        .min(3, "Must be at least 3 characters!")
        .max(20, "Must be maximum 20 characters!"),
    email: yup
        .string()
        .required("Email is required!")
        .email("Email is invalid!")
        //must end with @impact.com
        .max(50, "Must be maximum 50 characters!"),
    walletAddress: yup
        .string()
        .required(<>Wallet Address is required. If you do not have one, please create one at metamask.io <br /> </>)
        .min(3, "Must be at least 3 characters!")
        .max(50, "Must be maximum 20 characters!"),
    profilePic: yup
        .array(),
    password: yup
        .string()
        .required("Passwords are required to be at least 6 characters long, have uppercase letters, lowercase letters, numbers and special characters.")
        .min(6, "Must be at least 6 characters!")
        .max(40, "Must be maximum 40 characters!"),
  });
  return {
    successful: false,
    loading: false,
    message: "",
    schema,
  };
}

这是钱包地址的 html 代码

<div class="form-group">
  <label for="walletAddress">Wallet Address</label>
  <Field name="walletAddress" type="text" class="form-control" id="walletAdd"/>
  <ErrorMessage name="walletAddress" class="error-feedback" />
  <input class="btn btn-lg col-4 btn-outline-dark " style=" margin-top: 10px; width: 150px; max-height: 40px; font-size: 15px" type="button" value="Connect Wallet" @click="connect" >
</div>

Answer 1

您可以为未验证的输入模拟“单击”和“更改”事件

请参阅MDN 参考