Vue3搭配BalmUI开发时表单提交功能无法正常触发是什么原因？

问题根因 #

你使用的第三方UI库封装的ui-form组件默认不会直接触发原生submit事件，且需要配置必要的校验关联属性后，才会在校验通过后触发组件提供的submit事件。你直接给按钮绑定点击事件会跳过表单内置校验逻辑，自然不会校验输入内容。

解决步骤 #

• 第一步：统一整理表单数据源，给ui-form绑定model属性
  先在当前组件的data选项中定义统一的表单数据对象，示例：

  data() {
    return {
      formData: {
        email: '',
        password: ''
      },
      // 其余原有变量保持不变
    }
  }
  

  给ui-form标签添加model、ref属性，调整事件绑定：

  <ui-form
    type="|"
    item-margin-bottom="16"
    action-align="center"
    :model="formData"
    @submit="register"
    ref="formRef"
  >
  

• 第二步：给ui-form-field添加prop属性关联对应字段
  这是UI库表单识别校验字段的必要配置，修改两个表单项的代码：

  <!-- 邮箱表单项 -->
  <ui-form-field prop="email">
    <ui-textfield
      v-model="formData.email"
      required
      helper-text-id="email-field-helper-text"
      input-type="email"
    >
      Email Address
    </ui-textfield>
    <!-- 其余原有内容不变 -->
  </ui-form-field>
  
  <!-- 密码表单项 -->
  <ui-form-field prop="password">
    <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-form-field>
  

• 第三步：提交逻辑优先走表单内置校验回调
  配置完成后，ui-form的submit事件会在所有字段校验通过后自动触发，直接在register方法中写提交逻辑即可。如果你需要手动触发校验（比如非要绑定按钮点击事件），可以通过ref调用表单的validate方法：

  methods: {
    register() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 校验通过，写提交逻辑
        } else {
          // 校验失败，处理提示逻辑
        }
      })
    }
  }
  

• 补充说明：你之前加.native修饰符不生效的原因是ui-form组件内部拦截了原生form的提交行为，只会在校验通过后触发自定义的submit事件，监听原生事件自然无法收到回调。

内容的提问来源于stack exchange，提问作者Bianca Balan