表单验证

推荐的表单验证包是Vuelidate。
入门请查看文档。

安装Vuelidate

$ yarn add vuelidate
# 或:
$ npm install --save vuelidate

$ quasar new plugin vuelidate

创建了一个app插件文件：/src/plugins/vuelidate.js。 我们编辑它：

import Vuelidate from 'vuelidate'

export default ({ Vue }) => {
  Vue.use(Vuelidate)
}

然后我们编辑/quasar.conf.js来添加app插件文件到构建环境：

plugins: ['vuelidate']

注意：请确保将其添加到文件顶部的主要插件中，而不是放在framework插件部分。

例子

<template>
  <div>
    <q-input
      v-model="form.email"
      @blur="$v.form.email.$touch"
      @keyup.enter="submit"
      :error="$v.form.email.$error"
    />

    <q-btn color="primary" @click="submit">Submit</q-btn>
  </div>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      form: {
        email: ''
      }
    }
  },
  validations: {
    form: {
      email: { required, email  }
    }
  },
  methods: {
    submit () {
      this.$v.form.$touch()

      if (this.$v.form.$error) {
        this.$q.notify('Please review fields again.')
        return
      }

      // ...
    }
  }
}
</script>
文本字段 碎片输入