Vue表单验证插件vee-validate的应用介绍

Vue表单验证

• Vue有许多插件,Vue插件
• vee-validate：vue最好的验证插件。vee-validate

1. vee-validate自然输入校验

使用步骤：

1. 安装：

   npm i vee-validate
   

2. 创建独立校验文件utils/validate.js，导入默认校验规则。

   技术支持及细节说明

   示例代码：

   import { extend } from 'vee-validate'
   import * as rules from 'vee-validate/dist/rules'
   // rules: {alpha:xx,alpha_dash:xx,alpha_num:xx……}
   Object.keys(rules).forEach(rule => {
     extend(rule, rules[rule])
   })
   // Object.keys(rules) 获得对象中全部的属性名称，
   // 并以数组返回["alpha", "alpha_dash", "alpha_num", ……]
   // extend(rule, rules[rule]) 完成每个内置校验规则的注册操作
   

   各种校验规则：

   规则	含义
   alpha	只包含英文字符
   alpha_dash	可以包含英文、数字、下划线、破折号
   alpha_num	可以包含英文和数字
   alpha_spaces	可以包含英文和数字
   between:{min},{max}	在min和max之间的数字
   confirmed:{target}	必须和target一样
   digits:{length}	长度为length的数字
   dimensions:{width},{height}	符合宽高规定的图片
   email	符合邮箱规则
   excluded	排除，不包括
   ext:[extensions]	后缀名
   image	图片
   integer	整型
   is	必须是
   is_not	不是
   length	规定输入内容长度
   max:{length}	规定输入内容的最大长度为length
   min:{length}	规定输入内容的最小长度为length
   max_value:{val}	规定输入最大数值为val的
   min_value:{val}	规定输入最小数值为val的
   mimes:[list]	文件类型
   numeric	只允许数字
   oneOf	其中之一
   regex	匹配正则表达式
   required	必填项目
   required_if	仅当目标字段（第一个参数）设置为指定值（其他参数）之一时，验证中的字段才必须具有非空值
   size:{kb}	文件大小不超过

3. main.js文件引入验证独立文件:

   import '@/utils/validate.js' // 验证相关
   

4. 登录组件应用验证:

   基本使用和添加规则技术支持

   <!-- user/login.vue -->
   <van-cell-group>
       <!-- 表单域校验，通过 ValidationProvider 对被校验的项目做包围
            name：校验失败，提示当前项目名称,定义校验字段名称，用作错误提示使用
            rules：设置校验规则，required 必填
            v-slot: 接收"作用域插槽"数据，即校验失败错误信息
   		注意：当前这个地方只能使用v-slot（使用slot-scope，页面没有效果）-->
       <ValidationProvider name="手机号" rules="required" v-slot="{ errors }">
       <!-- 把校验的错误信息展示出来，error-message：显示校验失败的错误信息 -->
           <van-field v-model="loginForm.mobile" type="text" placeholder="请输入手机号码"
                      label="手机号" required clearable :error-message="errors[0]" />
           <!-- van-field通过:error-message接收、显示校验错误信息 -->
       </ValidationProvider>
       <ValidationProvider name="验证码" rules="required" v-slot="{ errors }">
           <van-field v-model="loginForm.code" type="password" placeholder="请输入验证码"
                      label="验证码" required clearable :error-message="errors[0]" />
               <!-- 命名插槽应用，提示相关按钮，是要给van-field组件内部的slot去填充的 -->
               <van-button slot="button" size="small" type="primary">发送验证码</van-button>
           </van-field>
       </ValidationProvider>
   </van-cell-group>
   ……
   <script>
       // import导入需要的模块 ValidationProvider，并components私有方式注册
       import { ValidationProvider } from 'vee-validate'
       export default {
           name: 'user-login',
           components: {
               // 注册
               ValidationProvider
           },
       }
   </script>
   

   此时已经可以实现校验，但是默认错误信息是英文的:

   

   v-slot说明：

   ​ https://blog.csdn.net/liushijun_/article/details/92186739

   ​ https://www.cnblogs.com/qhantime/p/11410073.html

   之前使用slot-scope接收子组件作用域插槽的数据信息，在vue新版本中，可以通过v-slot接收作用域插槽数据，格式就是 v-slot="数据名称"。

   slot-scope="stData" {{stData.errors[0]}}表现具体校验失败错误信息。
   形式上：v-slot="stData" slot-scope="stData"就是一样的。

   v-slot="{errors}" 对象解构赋值 errors[0]
v-slot="stData" {{stData.errors[0]}}

   当前校验部分，errors[0] 可以访问到校验失败的错误信息,固定用法。

   v-slot和slot-scope的区别:

   • v-slot 只能被用在 组件标签 或 template 标签身上

   • slot-scope 可以被应用在 组件标签 、普通html标签、template标签 上

   <template slot-scope="stData"></template>
   <template v-slot="stData"></template>
   

5. 设置提示语言(默认是英文提示)

   对 src/utils/validate.js 文件内容继续丰富信息，引入localize、zh_CN.js、注册中文、使用中文：

   语言技术支持

   // 1. 导入localize模块函数
   import { extend, localize } from 'vee-validate'
   // 导入全部的规则
   import * as rules from 'vee-validate/dist/rules'
   
   // 2.导入要使用的语言
   import zhCN from 'vee-validate/dist/locale/zh_CN.json'
   
   // 3.对导入好的语言做注册
   localize({
     // 对象成员简易赋值
     zhCN
   })
   // 4. 使用具体的语言
   localize('zhCN')
   
   // 遍历、注册全部的规则
   Object.keys(rules).forEach(rule => {
     extend(rule, rules[rule])
   })
   

   经过上述4个步骤，现在语言就是中文的：

   

6. 自定义校验规则

   技术支持

   在 src/utils/validate.js文件最后添加如下内容：

   // 为校验手机号码，自定义规则
   // phone:规则名称
   // value:被校验的数据
   extend('phone', {
     validate: value => {
       // return true  校验成功
       // return false 校验失败
       const reg = /^1[35789]\d{9}$/ // 正则校验手机号码
       return reg.test(value) // 正则匹配目标内容，返回boolean
    },
     // 校验失败的错误信息{_field_}代表被校验项目的name的名称
    message: '{_field_}格式不正确'
   })
   

   在手机号码表单域中使用上述校验规则：

   <ValidationProvider v-slot="{errors}" rules="required|phone" name="手机号码">
   

   效果：

   

2. validate表单整体校验

• 登录动作发生时触发验证功能。

步骤：

1. 在 user/login.vue 中引入 注册 ValidationObserver 组件。
2. 把全部的表单项目通过 ValidationObserver 组件圈选，并设置ref属性。
3. 单击登录按钮后，使得 ValidationObserver 调用validate方法对全部表单项目进行校验。

技术支持

示例代码：

<!-- user/login.vue -->
<!-- 用ValidationObserver组件把全部的校验项目给包围起来
ref设置好，使得组件实例可以通过this.$refs.xx 的方式获得当前的组件对象 -->
<ValidationObserver ref="loginFormRef">
  <ValidationProvider v-slot="{errors}" rules="required|phone" name="手机号码">
    ……
  </ValidationProvider>
  <ValidationProvider v-slot="{errors}" rules="required" name="密码">
    ……
  </ValidationProvider>
</ValidationObserver>

import { ValidationProvider, ValidationObserver } from 'vee-validate'
……
components: {
  ValidationProvider,
  ValidationObserver
},
methods: {
  // 登录系统
  async login () {
    // 对表单全部项目做校验，没有问题再向下执行
    // ValidationObserver
    // validate()返回promise对象
    // valid=true  校验成功    valid=false  校验失败
    const valid = await this.$refs.loginFormRef.validate()
    if (!valid) {
      // 校验失败，停止后续代码执行
      return false
    }

    // 调用api，校验账号信息有效，如下api请求有可能【成功】，还有可能【失败】
    try {
      const result = await apiUserLogin(this.loginForm)
      // console.log(result) // {token:xx,refresh_token:xx}
      
      // 通过vuex维护服务器端返回的token等秘钥信息
      this.$store.commit('updateUser', result)

      this.$toast.success('登录成功')
      // 页面跳转
      this.$router.push('/')
    } catch (err) {
      // 错误信息提示 vant组件库方法
      this.$toast.fail('手机号或验证码错误' + err)
    }
  }
}

注意：

1. validate()方法调用完毕会返回 Promise对象结果，需要通过await修饰使用。