Quasar 中对input控件输入的内容验证

最新推荐文章于 2024-11-05 16:35:50 发布

读不懂的标题

最新推荐文章于 2024-11-05 16:35:50 发布

阅读量4.2k

点赞数 1

分类专栏： Quasar

本文链接：https://blog.csdn.net/weixin_43867210/article/details/106141295

版权

Quasar 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Quasar框架中如何使用QInput组件进行输入内容的验证，包括内部验证的:rules属性和自定义验证器，以及外部验证的方法，如resetValidation()和error-message的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内部验证

在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>