vue @vuelidate父子組件綁定注意事項

更新時間：2025年02月17日 15:29:34 作者：堅定信念，勇往無前

Vue@vuelidate父子組件驗證時,不能直接綁定,需在子組件驗證方法內部進行綁定,以避免父組件驗證時包含子組件的驗證

vue @vuelidate父子組件綁定注意

如果父子組件都有驗證的，不能這樣寫

	const V2$ = useVuelidate(rules, formdata)
	const submitBtn = async () => {
		const V2$ = useVuelidate(rules, formdata)

如果這樣寫的話，在父組件驗證時，也會把子組件的驗證代上。

正確寫法

	const submitBtn = async () => {
		const V2$ = useVuelidate(rules, formdata)
		 let validate =await V2$.value.$validate()

要在自己驗證的方法內部進行綁定

Vuelidate表單驗證規(guī)則

Vuelidate中的必填驗證規(guī)則

用到的技術 vue + quasar + vuelidate(網址)

引用方法如下：

 Vue.use(window.vuelidate.default)
 var minLength = window.validators.minLength
 var required = window.validators.required 
 var requiredIf = window.validators.requiredIf
 var email = window.validators.email
 var helpers = window.validators.helpers

 validations: {
	baseInfoForm: {
        mobilePhone:{ required: required },        
        col19:{ required: required },                 
        kitchenTime:{  required: requiredIf(function(baseInfoForm) {
          return baseInfoForm.col19 == 'Y'  
          //當col19的值為Y時,才有kitchenTime的驗證
        })}        


  }

一個簡單的例子：

<q-field 
icon="stay_primary_portrait"
:error="readonly == false? $v.baseInfoForm.mobilePhone.$error: false"
error-label="手機號碼不能為空"  //警告提示信息
class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
  <q-input
   :readonly="readonly"  
   @blur="$v.baseInfoForm.mobilePhone.$touch"
   :float-label="$t('手機號碼')"
   type="number"
   v-model="baseInfoForm.mobilePhone"></q-input>
</q-field>
<q-field
v-if="baseInfoForm.col19 == 'Y' "
icon="access_time"
:error="readonly == false? $v.baseInfoForm.kitchenTime.$error: false"
error-label="進入廚電行業(yè)時間不能為空"
class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
  <q-datetime
   type="date"
   format="YYYY-MM-DD"
   format-model="string"
   :float-label="$t('若是,進入廚電行業(yè)時間')"
   @blur="$v.baseInfoForm.kitchenTime.$touch"
    v-model="baseInfoForm.kitchenTime"></q-datetime>
</q-field>

效果如下：

具體代碼實現(xiàn)如下：

    <div id="q-supplierBaseInfo" v-cloak>
      <q-field 
   		icon="stay_primary_portrait"
        :error="readonly == false? $v.baseInfoForm.mobilePhone.$error: false"
        error-label="手機號碼不能為空"
        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
        <q-input
          :readonly="readonly"  
           @blur="$v.baseInfoForm.mobilePhone.$touch"
           :float-label="$t('手機號碼')"
           type="number"
           v-model="baseInfoForm.mobilePhone"></q-input>
      </q-field>
      <q-field 
         icon="work"
         :error="readonly == false? $v.baseInfoForm.col19.$error: false"
         error-label="是否為供應商不能為空"
         class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
         <q-select
           @blur="$v.baseInfoForm.col19.$touch"
           :float-label="$t('是否為供應商')"
           :options="col19Options"
           v-model="baseInfoForm.col19"></q-select>
      </q-field>       
    </div>
   
    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var requiredIf = window.validators.requiredIf
      var helpers = window.validators.helpers
      var supplierInvite = new Vue({
        el: '#q-supplierBaseInfo',
        i18n: i18n,
        data: function() {
          return {
            col19Options:[
              {
                label: '是',
                value: 'Y'
              },
              {
                label: '否',
                value: 'N'
              }
            ],
            baseInfoForm: { col19:''}
        },
        validations: {
          baseInfoForm: {
            col19:{ required: required },            
            kitchenTime:{  required: requiredIf(function(baseInfoForm) {
              return baseInfoForm.col19 == 'Y'           
            })}                                       
          }
        }
      })
    </script>