Vuejs简单强大的验证插件 - vuelidation

Vuejs简单强大的验证插件 - vuelidation
插件名称 vuelidation
发布时间 2021年2月2日
插件作者 cj

Vuelidation是Vue.js应用程序的一种简单,轻巧,功能强大的表单验证器。

安装

yarn add --dev vuelidation@latest

使用

<script>
  new Vue({
    data () {
      return {
        name: '',
      }
    },
    
    vuelidation: {
      data: {
        name: {
          required: true,
        },
      },
    },
    
    methods: {
      submit () {
        if (this.$vuelidation.valid()) {
          console.log(`Hello, ${this.name}!`)
        }
      }
    }
  })
</script>

<template>
  <form>
    <input type='text' v-model='name' />
    <div v-if='$vuelidation.error("name")'>{{ $vuelidation.error('name') }}</div>
    
    <button type="submit" :disabled="$vuelidation.errors()">Submit</button>
  </form>
</template>