Vue JS - 提交时的复选框验证错误

Question

在我的注册表单中，我有一个复选框，用于确认用户是否接受了条款和条件。一旦我点击提交按钮，该复选框应该会验证，但是由于该复选框最初未被选中，因此验证错误会立即显示出来。最终，一旦我勾选复选框，错误就会反应性消失，但对于这种特殊情况，我希望只有在我点击提交后才会显示验证错误（如果我没有选中它）。我没有收到任何特定的控制台错误，但我只是卡在执行上。谁能告诉我如何实现这一目标？如有任何帮助，我将不胜感激！

Checkbox.vue - 这是代表​​复选框的组件。

<template>
  <div class="check-wrapper">
    <label :for="id" class="check-label">
      <input v-model="checkboxValue"
             :id="id"
             :checked="isCheckboxChecked"
             :oninput="checkCheckbox()"
             type="checkbox"
             name="newsletter"/>
      <span v-if="labelText && !isLabelHtmlText">{{ labelText }}</span>
      <span v-if="labelText && isLabelHtmlText" class="label-html" v-html="labelText"></span>
      <span :class="{'check-mark-error': checkboxError}" class="check-mark"></span>
    </label>
    <p v-if="checkboxError" class="checkbox-error text-error">{{checkboxError}}</p>
  </div>
</template>

<script>
  data: () => ({
    checkboxValue: false
  }),
  methods: {
    updateValue: function () {
      if (this.$props.callback) {
        this.$props.callback(this.$props.id, this.$props.checkboxData, this.checkboxValue);
      }
    },
    checkCheckbox: function () {
      this.updateValue();
    }
  }
</script>

Register.vue - 这是进行注册的父组件

<template>
   <BasicCheckbox :id="'terms-privacy'"
                  :callback="onTermsClick"
                  :label-text="'terms and conditions'"
                  :is-label-html-text="true"
                  :checkbox-error="termsPrivacyError"
                  class="terms-privacy"/>
</template>
<script>
  methods: {
    validateData: function (data) {
      if (!this.termsPrivacyError) {
        this.sendRegistration(data).then(response => {
          if (response) {
            console.log('Registration successful');
            this.loginUser({email: data.email, password: data.password}).then(response => {
              if (response) {
                console.log('User logged in!');
                this.$router.push({name: ROUTE_NAMES_HOME.HOME});
              }
            })
          }
        });
      }
    },

    // Terms and Privacy Checkbox
    onTermsClick: function (checkboxId, checkboxData, data) {
      this.termsPrivacyError = !data ? termsPrivacyErrorText : '';
    },
  }
</script>

Answer 1

根据我的理解，从您的情况来看，当用户没有检查隐私和政策时，验证不会发生。如果用户勾选和取消勾选复选框，则验证正在工作。

如果是这样的话，你可以做的是检查子组件“Checkbox.vue”数据属性“checkboxValue”的值，因为默认值已经是false，如果用户做了这个动作并且打勾，它就是true复选框。在提交表单之前，添加checkboxValue 条件检查。

这是更新后的Register.vue 组件文件：

<template>
  <BasicCheckbox
    :id="'terms-privacy'"
    :callback="onTermsClick"
    :label-text="'terms and conditions'"
    :is-label-html-text="true"
    ref="BasicCheckbox"
    :checkbox-error="termsPrivacyError"
    class="terms-privacy"
  />
</template>
<script>
methods: {
  validateData: function (data) {
    if (!this.termsPrivacyError && this.$refs.BasicCheckbox.checkboxValue) {
      this.sendRegistration(data).then(response => {
        if (response) {
          console.log('Registration successful');
          this.loginUser({email: data.email, password: data.password}).then(response => {
            if (response) {
              console.log('User logged in!');
              this.$router.push({name: ROUTE_NAMES_HOME.HOME});
            }
          })
        }
      });
    }
  },

  // Terms and Privacy Checkbox
  onTermsClick: function (checkboxId, checkboxData, data) {
    this.termsPrivacyError = !data ? termsPrivacyErrorText : '';
  },
}
</script>

我只修改了什么：

我为组件阶段`BasicCheckbox'添加了ref的属性：

ref="BasicCheckbox"

而对于验证，我只是添加了条件是否 ref 组件 'BasicCheckbox' 的值为 `true'：

if (!this.termsPrivacyError && this.$refs.BasicCheckbox.checkboxValue)

Answer 2

首先，这不是一个优雅的解决方案，但它确实有效，我们使用computed 值来控制是否应显示错误。我们在submit方法中更新它，并在我们单击它的复选框时取消它以进行演示。

new Vue({
  el: "#app",
  data: {
    termsState: false,
    validated: false
  },
  computed: {
    termsError() {
      return this.validated && !this.termsState
    }
  },
  methods: {
    handleTermsState() {
      this.validated = false
    },

    handleSubmit() {
      this.validated = true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <label for="terms">
            Terms and Privacy Policy
            <input type="checkbox" id="terms" name="terms" v-model="termsState"  @change="handleTermsState">
            {{ termsState }}
        </label>
  <p style="color: red" class="for-error terms-error" v-if="termsError">You have to agree the terms and privacy condition.</p>
  <div><button type="submit" @click="handleSubmit">Submit</button></div>
</div>