Vue校验详解

在实际开发中，表单数据校验是一个必不可少的环节，Vue提供了一种方便易用的校验方式。本文将从多个方面详细阐述Vue校验的相关知识，包括校验规则、校验成功才能发请求、校验字数、校验文件格式、校验提示、校验数字、校验手机号、校验子表格、校验子表单以及校验正整数。

一、Vue校验规则

Vue校验规则使用vuelidate插件，该插件能够将数据模型和校验规则映射起来，实现校验表单数据的功能。在使用该插件之前，需要先安装并引入vuelidate和vue在组件中注册。

npm install vuelidate --save

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

Vue.use(Vuelidate)

首先可以在data中初始化需要校验的数据，并在computed中定义校验规则。如下代码所示，通过required规则，定义了name的必填限制。

import { required } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      name: ''
    }
  },
  validations: {
    name: {
      required
    }
  }
}

在模板中，需要绑定v-model到需要校验的数据上，并在需要校验的元素上绑定指令。当校验不符合规则时，会在元素下方显示错误提示。

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">请输入名称</div>
  </div>
</template>

二、Vue校验成功才能发请求

在实际开发中，当表单数据校验成功时，才能发送表单数据到服务器。Vue提供了watch监听校验状态，当校验成功时，可以设置一个标志位，在提交时检查标志位是否为真，如下代码所示：

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">请输入名称</div>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        name: '',
        isSubmit: false
      }
    },
    validations: {
      name: {
        required
      }
    },
    watch: {
      $v: {
        deep: true,
        handler () {
          this.isSubmit = !this.$v.$invalid
        }
      }
    },
    methods: {
      submitForm () {
        if (this.isSubmit) {
          // 发送表单数据到服务器
        }
      }
    }
  }
</script>

三、Vue校验字数

在实际开发中，需要对输入框的字数进行限制，Vue提供了maxLength规则和minLength规则，分别实现字符串最大长度限制和最小长度限制，示例代码如下：

export default {
  data () {
    return {
      name: ''
    }
  },
  validations: {
    name: {
      maxLength: maxLength(10),  // name最大长度为10
      minLength: minLength(2)    // name最小长度为2
    }
  }
}

在模板中，需要绑定v-model到需要校验的数据上，并在需要校验的元素上绑定指令。当校验不符合规则时，会在元素下方显示错误提示。

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">
      <div v-if="!$v.name.maxLength">名称长度超限</div>
      <div v-if="!$v.name.minLength">名称长度不足</div>
    </div>
  </div>
</template>

四、Vue校验文件格式

在实际开发中，需要对上传文件的格式进行限制。Vue提供了fileSize规则和文件类型规则，分别实现文件最大大小限制和文件类型限制，示例代码如下：

<template>
  <div>
    <input type="file" @change="handleFile">
    <div v-if="!$v.file.$invalid">文件格式正确</div>
    <div v-if="$v.file.$error">用图片作为示例，文件格式不正确</div>
  </div>
</template>

<script>
  import { fileSize, fileType } from 'vuelidate/lib/validators'

  export default {
    data () {
      return {
        file: null
      }
    },
    validations: {
      file: {
        fileSize: fileSize(2 * 1024 * 1024),      // 文件最大2MB
        fileType: fileType(['jpg', 'png', 'gif']) // 文件类型必须为jpg/png/gif
      }
    },
    methods: {
      handleFile (event) {
        this.file = event.target.files[0]
      }
    }
  }
</script>

五、Vue校验提示

在实际开发中，需要对校验错误进行友好提示。Vue提供了errorBag选项和$error对象，实现对校验错误的判断和获取错误提示信息。示例代码如下：

<template>
  <div>
    <input type="text" v-model="$v.name.$model">
    <div v-if="$v.name.$error">{{ $v.name.$params.required ? '名称不能为空' : '名称格式不正确' }}</div>
  </div>
</template>

上述代码中，$v.name.$params.required是名称是否必填的一个判断，如果为真，则提示名称不能为空，否则提示名称格式不正确。

六、Vue校验数字

在实际开发中，需要对输入框的数字进行判断，Vue提供了maxValue规则和minValue规则，分别实现数字最大值限制和数字最小值限制。示例代码如下：

export default {
  data () {
    return {
      age: 0
    }
  },
  validations: {
    age: {
      maxValue: maxValue(120), // age最大值为120
      minValue: minValue(0)   // age最小值为0
    }
  }
}

在模板中，需要绑定v-model到需要校验的数据上，并在需要校验的元素上绑定指令。当校验不符合规则时，会在元素下方显示错误提示。

<template>
  <div>
    <input type="text" v-model="$v.age.$model">
    <div v-if="$v.age.$error">
      <div v-if="!$v.age.maxValue">年龄超过最大值</div>
      <div v-if="!$v.age.minValue">年龄小于最小值</div>
    </div>
  </div>
</template>

七、Vue校验手机号

在实际开发中，需要对手机号进行校验。Vue提供了mobile规则，判断手机号是否正确。示例代码如下：

export default {
  data () {
    return {
      phone: ''
    }
  },
  validations: {
    phone: {
      mobile
    }
  }
}

在模板中，需要绑定v-model到需要校验的数据上，并在需要校验的元素上绑定指令。当校验不符合规则时，会在元素下方显示错误提示。

<template>
  <div>
    <input type="text" v-model="$v.phone.$model">
    <div v-if="$v.phone.$error">手机号格式不正确</div>
  </div>
</template>

八、Vue校验子表格

在某些场景中，需要对表格进行校验，包括校验表格的行数、列数和行数据。Vue提供了subValidations规则和rowValidations规则，分别实现对行数据和行数的校验。示例代码如下：

export default {
  data () {
    return {
      tableData: [
        {
          name: '',
          age: ''
        },
        {
          name: '',
          age: ''
        }
      ]
    }
  },
  validations: {
    tableData: {
      $each: {
        name: {
          required
        },
        age: {
          required,
          minValue: minValue(0),
          maxValue: maxValue(120)
        }
      }
    }
  }
}

上述代码中，$each表示对每一行的数据进行校验。当校验不符合规则时，会在元素下方显示错误提示。

九、Vue校验子表单

在某些场景中，需要对表单中的子表单进行校验。Vue提供了$each和deep选项，实现对子表单的校验。示例代码如下：

<template>
  <div>
    <div v-for="(user, index) in userList" :key="index">
      <input type="text" v-model="$v.userList[index].name.$model">
      <div v-if="$v.userList[index].name.$error">请输入姓名</div>
      <input type="text" v-model="$v.userList[index].age.$model">
      <div v-if="$v.userList[index].age.$error">
        <div v-if="!$v.userList[index].age.maxValue">年龄超过最大值</div>
        <div v-if="!$v.userList[index].age.minValue">年龄小于最小值</div>
      </div>
    </div>
    <button @click="addUser">添加用户</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        userList: [
          { name: '', age: '' },
          { name: '', age: '' }
        ]
      }
    },
    validations: {
      userList: {
        $each: {
          name: { required },
          age: { required, minValue: minValue(0), maxValue: maxValue(120) }
        }
      }
    },
    methods: {
      addUser () {
        this.userList.push({ name: '', age: '' })
      }
    }
  }
</script>

上述代码中，$each表示对每个子表单进行校验，deep选项表示对子表单数据进行递归校验。