VUE学习----validations（表单验证）

需要验证的场景

• 必要的信息不能让用户提交空信息
• 保证提交信息的格式正确
• 表单验证控制一些元素的行为，比如信息不正确，提交按钮的相应

Vuelidate

Vuelidate是轻量级验证库。

• 安装方式
  npm install vuelidate -S
• 引入方式
  import 'Vuelidate' from Vuelidate
• 使用示例

//demo.vue
 <template>
     <div>
         <input type="email" v-model="email"/>
         <button type="submit">提交</button>
     </div>
 </template>
 
 <script>
    import { required, email } from 'vuelidate/lib/validators'
    export default {
        data() {
            return {
                email: null
            }
        },
        validations: {
            email: {
                required,
                email
            }
        }
    }
</script>

  demo中，组件添加了一个validations选项，为data中的数据email添加一个对象，被template中的input元素绑定。从Vuelidate导入‘required’、‘email’等规则，都是内置的Vuelidate验证器。

  Vuelidate自动为组件添加$v的计算属性，包含整个表单验证的当前状态。可以单独读取email对象，包含了email验证的状态。

$v.email.$invalid = true(说明email这项表单没有通过验证)
$v.email.required = false(说明email为空)
$v.email.required = false && $v.email.email = false(说明email格式错误)

  表单出现问题时，可以有效向用户显示错误，但是进入页面就自动显示错误消息，用户体验不好。Vuelidate提供了很多方法和属性使用。例如：

$v.email.$dirty  // 用户是否有触发过表单
$v.email.$error // 用户真实错误$dirty + $invalid
$v.email.$touch() // 用来改变$dirty值

$v中同时包含了表单的全局属性，可用于编写表单提交逻辑，即：

$v.$dirty
$v.$error
$v.$anyDirty
$v.$anyError
$v.$invalid

  $v.$invalid将在任何与我们的验证相关的错误发生时为真。您可以在提交表单之前检查$v.$invalid状态，从而轻松完成验证表单操作。注意：在那之前我们调用$v.$touch()，这将更改所有表单验证的$v.$dirty状态，导致所有$invalid字段的$error为true。