vue-quasar使用validate进行表单验证

1.npm install vuelidate --save或是yarn add vuelidate --save，下载安装validate

2.在src/boot里面引入 vuelidate.js，vuelidate.js里面内容如下：

import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

3.在src下面新建plugins文件夹和validators.js

1.png

4.在validators.js里面可以写你的表单验证规则

export const {

  required,
  email,
  helpers,
  sameAs,
  alpha,
  alphaNum,
  numeric,
  minLength,
  maxLength,
  between,
  requiredIf

  // 引入 vuelidate 内置验证器
} = require('vuelidate/lib/validators')

// 或者定义你自己的验证器

// 电话
const phone = /^[1][3,4,5,7,8,9][0-9]{9}$/
// 验证码
const code = /^\d{4}$/

// 邮箱验证
// const Email = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/
// 字符验证
// const Char = /[\u4e00-\u9fa5]/
const username = /^[a-zA-Z0-9_-]{6,16}$/ // 开发

const password = /^[a-zA-Z][a-zA-Z0-9_-]{5,20}$/ // 正式

// const password = /^[a-zA-Z0-9_-]{6,16}$/ // 开发

/********
*
  自定义验证器
*
*********/

// 账号验证(姓名)
export const isusername = value => username.test(value) || !helpers.req(value)
// 手机号
export const isPhone = value => phone.test(value) || !helpers.req(value)
// 验证码
export const isCode = value => code.test(value) || !helpers.req(value)

// 邮箱
// export const isEmail = value => Email.test(value) || !helpers.req(value)
// 字符
// export const isChar = value => Char.text(value) || !helpers.req(value)

表单验证推荐的方式

• 1，在 '/src/plugins/validators.js' 下定义你所需验证器（结合vuelidate）
• 2，在你的 '.vue' 组件中导入所定义的验证器，并通过 'validations' API注册
• 3，作用到你的表单元素上
• demo:

1, in '/src/plugins/validators.js':
    const { required, minLength } = require('vuelidate/lib/validators')
 2, in 'xxx.vue':
   import { minLength } from /src/plugins/validators.js
   export default {
      data () {
         return {
           input: ''
        }
       },
       validations: {
        input: {
          required,
          minLength: minLength(4)
        }
       },
      ...
  }
 3, in 'xxx.vue':
     <template>
      <q-input v-model="input" :error="$v.input.$error" @blur="$v.input.$touch" error-message="输入不符合验证规则哦" />
    </template>

5.在页面中

 <template>
    <div>
        <q-input
            ref="input"
            v-model="classForm.phone"
            :error="$v.classForm.phone.$error"
            :error-message="$v.classForm.phone.isPhone $t('手机号码不能为空') : $t('*请输入正确手机号')"
            @blur="$v.classForm.phone.$touch"
            placeholder="您的电话为..."
          />
    </div>
  </template>
  <script>
    import { required, alphaNum, numeric, minLength, maxLength, isPhone, isCode } from 'src/plugins/validators'
export default {
  data () {
    return {
      classForm: {
        phone: '13639698975'
      }
    }
  },
  validations: {
    classForm: {
      phone: {
        isPhone,
        required,
        numeric,
        minLength: minLength(11),
        maxLength: maxLength(11)
      }
}
},
  methods: {
    setPhone (value) {
      this.phone = value
      this.$v.phone.$touch()
    },
    submit () {
      this.$v.classForm.$touch()
      if (this.$v.classForm.$error) {
      } else {
        this.$router.push({
          path: '/home',
        })
      }
    }
  }
 }
</script>

具体请看官网：https://vuelidate.js.org/#sub-basic-form