如何使用 vue js 2 中子元件的驗證函數來驗證父元件中的輸入？

我嘗試在我的 vue 專案中建立可重複使用的元件。這是我正在接受的培訓的一部分。但我認為我的程式碼需要一些幫助，這讓我感到困惑。

let validations = {}

validations.firstName = function(e, that) {
  if (e.target.value == "") that.errors = {
    [that.labelID]: 'Please enter your first name'
  }
  else return true
  that.input_error = !that.input_error
}

validations.phone = function(e, that) {
  if (e.target.value == "") that.errors = {
    [that.labelID]: 'Please enter phone number'
  }
  else if (e.target.value.length > 10) that.errors = {
    [that.labelID]: 'Phone number should be 10 digits only'
  }
  else return true
  that.input_error = !that.input_error
}

validations.email = function(e, that) {
  if (e.target.value == "") that.errors = {
    [that.labelID]: 'Please enter email'
  }
  else return true
  that.input_error = !that.input_error
}

Vue.component('childInput', {
  template: '#my-child-input',
  data() {
    return {
      errors: {},
      input_error: false
    }
  },
  props: {
    labelID: String,
    label: String,
    inputType: {
      type: String,
      default: 'text'
    },
    value: {
      type: [String, Boolean, Number],
      default: null
    },
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value)
    },
    handleFocusIn(e) {
      this.errors = {[this.labelID]: ''}
      if (this.input_error) this.input_error = !this.input_error
    },
    handleFocusOut(e) {
      switch (this.labelID) {
        case 'firstName':
        case 'phone':
        case 'email':
          validations[this.labelID](e, this)
          break;
        default:
          console.log('in default last name')
          break;
      }
    }
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      event: {
        firstName: '',
        phone: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit(e) {
      // I can access firstName, phone and email. 
      // But how to access the validation functions written in child component
      console.log('All data: ', this.event)
    }
  }
})

.someStyleClass {
  margin-bottom: 20px;
}

.input_error {
  border-color: red !important;
  color: red;
}

.labelStyle {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<!-- Parent Component -->
<div id="app">
  <div class="someStyleClass">
    <child-input v-model="event.firstName" label="First Name" label-i-d="firstName" />
  </div>
  <div class="someStyleClass">
    <child-input v-model="event.phone" label="Phone" label-i-d="phone" />
  </div>
  <div class="someStyleClass">
    <child-input v-model="event.email" label="* Email" label-i-d="email" input-type="email" />
  </div>

  <button type="submit" v-on:click="handleSubmit">Validate & Submit</button>

</div>


<!-- Child Component -->
<template id="my-child-input">
  <div>
    <label class="labelStyle" :class="{input_error}">{{ label }}</label>
    <input :class="{input_error}" :value="value" :type="[inputType]" v-on:input="handleInput" v-on:focusout="handleFocusOut" v-on:focusin="handleFocusIn"/>
    <div v-if="errors[labelID]" :class="{input_error}">{{errors[labelID]}}</div>
  </div>
</template>

我能夠在子層級驗證輸入字段，並在焦點事件發生時在輸入字段附近顯示其相關錯誤。我還可以在父組件中存取名字、電話和電子郵件。但是當我從父級提交按鈕時，我無法驗證這些欄位。由於驗證是在子層級進行的，因此錯誤也是如此。

點擊按鈕後如何檢查驗證並確保名字、電話和電子郵件有效。

更新每次當使用者在輸入欄位中輸入錯誤資料時，都會在子層級單獨驗證資料。但我沒有找到在父元件中找到相同內容的方法。因為我的父組件的資料變數在輸入時同時更新。

點擊提交後如何在父級別進行驗證，無需引用且無需使用其他庫？

P粉605385621279 天前415

如何使用 vue js 2 中子元件的驗證函數來驗證父元件中的輸入？

全部回覆(1)我來回復