vee-validate

VeeValidate Template Based Form Validation Framework for Vue.js

main.js

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

2.x

v-validate

<input type="text" name="field" v-validate="'required'">
<span>{{ errors.first('field') }}</span>

Error

"export 'default' (imported as 'VeeValidate') was not found in 'vee-validate'

this seems to happen in any version after 3.0. I installed vee-validate@2.2.15 and it worked.

npm i vee-validate@2

Using The Custom Rule

<input type="password"
        v-model="form.password"
        v-validate="{ required: true, min: 6, max: 20, numAndText: true }"

  import { isPwdValid } from '@/libs/ls'
  created() {
    this.$validator.extend('numAndText', {
      getMessage: field => "必須包含6-20文字和數字",
      validate: value => isPwdValid(value)
    })
  },

libs/ls

export function isPwdValid(pwd) {
  return new RegExp(/^(?=.*\d+)(?=.*[a-zA-Z])[0-9a-zA-Z]{6,20}$/).test(pwd)
}

組件間同步驗證

利用同步執行API

this.$validator.validateAll()
.then(res => {
  console.log('api1')
})
.then(res => {
   console.log('api2)
})