Quasar 中對input控件輸入的內容驗證

內部驗證

在quasar中使用q-input控件進行內部驗證的時候我們可以使用:rulegs屬性來驗證QInput組件。

指定嵌入式規則數組或您自己的驗證器。 您的自定義驗證器將是一個函數，如果驗證器成功，

它將返回true，否則將返回帶有錯誤消息的String。

自定義規則：value => condition || errorMessage

value => value.includes('Hello') || 'Field must contain word Hello'

<template>
  <div class="q-pa-md" style="max-width: 300px">
    <q-input
      ref="input"
      filled
      v-model="model"
      :rules="[val => !!val || 'Field is required']"
    />
  </div>
</template>

我們也可以外部定義規則,在rules中引入。

 <q-input filled  v-model="Time" mask="##:##:##" fill-mask
                            :rules="[val => !!val || '* Required',val => isValidrunTime ]" lazy-rules
                            error-message="時間格式不正確" />

<script>
export default {
  data () {
    return {
      Time: '00:00:00'
    }
  },

  computed: {
    isValidrunTime () {
      var times = this.Time.split(':')
      var hour = times[0]
      var Minute = times[1]
      var second = times[2]
      if ((parseInt(hour) >= 0 && parseInt(hour) < 24) &&
        (parseInt(Minute) >= 0 && parseInt(Minute) < 60) &&
        (parseInt(second) >= 0 && parseInt(second) < 60) && this.Time.indexOf('_') < 0) {
        if (this.Time === '00:00:00') {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
  }
}
</script>

您可以通過在QInput上調用resetValidation()方法來重置驗證。

QInput rules屬性有輔助器如：“date”、“time”、“hexColor”、“rgbOrRgbaColor”、“anyColor”）或寫出指定您的自定義需求的字符串。

 <q-input filled ref="input"  lazy-rules mask="date" :rules="['date']">

如果設置了lazy-rules，則驗證在第一次失去焦點之後開始。

外部驗證
還可以使用外部驗證，並且僅傳遞error和error-message（啓用bottom-slots以顯示此錯誤消息）。

 <q-input ref="input" filledv-model="model" label="Type here" bottom-slots hint="Max 3 characters" error-message="Please use maximum 3 characters" :error="!isValid" />

<script>
export default {
  data () {
    return {
      model: ''
    }
  },

  computed: {
    isValid () {
      return this.model.length <= 3
    }
  }
}
</script>