为什么我的提交表单在带有 BalmUI 的 Vue3 中不起作用

Question

我正在尝试创建一个注册页面，但我的 sybmit 不起作用。有谁知道如何修理它？这是我的代码

<template>
  <div>
    <h1>Register</h1>
    <ui-form
      type="|"
      item-margin-bottom="16"
      action-align="center"
      v-on:submit.prevent="register()"
    >
      <template #default="{ actionClass }">
        <ui-form-field>
          <ui-textfield
            v-model="email"
            required
            helper-text-id="email-field-helper-text"
            input-type="email"
          >
            Email Address
          </ui-textfield>
          <ui-textfield-helper
            v-if="controls.helperText"
            id="email-field-helper-text"
            :visible="controls.isVisible"
          >
            Must be like me@example.com
          </ui-textfield-helper>
        </ui-form-field>
        <ui-form-field>
          <label>Password:</label>
          <ui-textfield
            v-model="password"
            input-type="password"
            required
            pattern=".{8,}"
            helper-text-id="pw-validation-msg"
            :attrs="{ autocomplete: 'current-password' }"
            >Choose password</ui-textfield
          >
          <ui-textfield-helper id="pw-validation-msg" visible validMsg>
            Must be at least 8 characters long
          </ui-textfield-helper>
        </ui-form-field>
        <ui-form-field :class="actionClass">
          <ui-button raised nativeType="submit" type="submit">Submit</ui-button>
          <ui-button outlined>Cancel</ui-button>
        </ui-form-field>
      </template>
    </ui-form>
    <div>
      {{ mesaj }}
    </div>
  </div>
</template>

我也试过这个而不是 v-on:submit.prevent="register()" @submit.prevent="register()" 或 @submit.prevent.native 此外，如果我将 @click=register() 放在我的按钮上，它会注册所有值，即使它们无效

Answer 1

我已经使用验证器弄明白了 https://next-material.balmjs.com/#/data-input/validator 这是代码：

<template>
  <div>
    <h1>Register</h1>
    <ui-form type="|" item-margin-bottom="16" action-align="center">
      <template #default="{ actionClass }">
        <ui-form-field>
          <ui-textfield
            v-model="formData.email"
            required
            helper-text-id="email-field-helper-text"
            input-type="email"
          >
            Email address
          </ui-textfield>
          <ui-textfield-helper
            v-if="controls.helperText"
            id="email-field-helper-text"
            :visible="controls.isVisible"
          >
            Must be like me@example.com
          </ui-textfield-helper>
        </ui-form-field>
        <ui-form-field>
          <label>Password:</label>
          <ui-textfield
            v-model="formData.password"
            input-type="password"
            required
            pattern=".{8,}"
            helper-text-id="pw-validation-msg"
            :attrs="{ autocomplete: 'current-password' }"
            >Choose password</ui-textfield
          >
          <ui-textfield-helper id="pw-validation-msg" visible validMsg>
            Must be at least 8 characters long
          </ui-textfield-helper>
        </ui-form-field>
        <ui-alert v-if="message" state="error">{{ message }}</ui-alert>
        <ui-form-field :class="actionClass">
          <ui-button raised @click="register()">Submit</ui-button>
          <ui-button outlined>Cancel</ui-button>
        </ui-form-field>
      </template>
    </ui-form>
    <div>
      {{ mesaj }}
    </div>
  </div>
</template>

<script>
import utils from "../utils.js";
import { useValidator, helpers } from "balm-ui";

const validations = {
  email: {
    label: "Email",
    validator: "required, email",
    email: {
      validate(value) {
        return /^(([^<>()\]\.,;:\s@"]+(\.[^<>()\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(value);
      },
      message: "Email address should be like me@example.com",
    },
  },
  password: {
    label: "Password",
    validator: "required, password, minRule",
    password: {
      validate(value) {
        return /^\w+$/.test(value);
      },
      message: "%s must be a letter, digit or underline",
    },
    minRule: {
      validate(value) {
        return value.trim().length >= 8;
      },
      message: "%s minLength >= 8",
    },
  },
};

export default {
  name: "Register",
  required: {
    validate(value) {
      return !helpers.isEmpty(value);
    },
    message: "%s is required",
  },
  data() {
    return {
      balmUI: useValidator(),
      validations,
      formData: {
        email: "",
        password: "",
      },
      mesaj: "",
      message: "",
      controls: {
        helperText: true,
        isVisible: true,
      },
    };
  },
  methods: {
    register() {
      let result = this.balmUI.validate(this.formData);
      let { valid, message } = result;
      this.message = message;
      console.log(`Vrei sa te inregistrezi cu email: ${this.formData.email}`);
      console.log(utils.url);

      if (valid) {
        let data = {
          email: this.formData.email,
          password: this.formData.password,
        };

        let requestParameters = utils.globalRequestParameters;
        requestParameters.method = "POST";
        requestParameters.body = JSON.stringify(data);

        fetch(utils.url + "user", requestParameters).then((res) => {
          res.text().then((res) => (this.mesaj = res));
        });
      }
    },
  },
};
</script>

<style></style>

为什么我的提交表单在带有 BalmUI 的 Vue3 中不起作用

Why my submit form is not working in Vue3 with BalmUI

forms

vuejs3