移动端自定义校验规则VeeValidate的使用

前一阵遇到一个很头疼的事情，移动端自定义校验规则并显示。举个栗子，它长这样：

image.png

乍一看很多组件库已经实现了。element-ui使用的验证库是validator，本文选取的是另一款，vue专用验证库，下载量也很大，叫做vee-validate。下面就重点介绍一下它的使用方法：

npm install vee-validate --save

由于这个库更新的很频繁，新版本的使用方法已经出现了变化。本文中使用的 VeeValidate 版本为2.1.5

• 在main.js里全局引入

import VeeValidate, { Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate, {
  dictionary: {
    zh_CN: zh_CN
  }
})
Validator.localize('zh_CN')

• vee-validate有一些内置的校验规则，它的使用方法如下：

//js部分
const validate = {
  custom: {
      username: {
        required: () => '昵称不得为空',
        min: () => '不得小于3个字符',
        max: () => '不得大于10个字符',
      }
    },
  };
export default {
  data () {
    return {
      form: {
        username: ''
      },
   },
   mounted() {
    this.$validator.localize('zh_CN', validate);
    // 拓展的验证规则（组件内写法）
    this.$validator.extend('qq', {
      getMessage: field => 'qq手机号有误',
      validate: value => {
        return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
      }
    })
  },
}

当用户点击按钮校验时：

this.$validator.validate()
  .then((valid) => {
      console.log(valid);  //true验证通过
      console.log(this.errors);
      console.log(this.errors.items[0].msg); //在弹出层中要显示的第一个错误
  })

以上栗子不难看出：
首先我们要定义一个本地字段，组件初始化时加载
在要校验的字段上加name属性，name属性值和本地字段值保持一致
在要校验的字段上加入v-validate=""
如何清除错误 ？

this.$validator.errors.clear()

以上栗子的qq字段其实是个自定义规则，自定义规则除了在组件内的写法之外，也可以在main.js中全局引入，这样方便所有组件都能使用。下面介绍下vee-validate的自定义规则：

• 在 main.js中引入

Validator.extend('number', {
  getMessage: field => '请输入正确的数字',
  validate: value => {
    return /^[0-9]*$/.test(value)
  }
})

Validator.extend('selectRangeMin', {
  getMessage: (field, params) => {
    return `请至少选择${params[0]}个选项`
  },
  validate: (value, param) => {
    return value.length >= Number(param[0])
  }
})

• 组件内的模板写法：

      
          
{{item.text}}
       

{{errors.first('checkboxValue')}}

// js部分
data () {
   return {
      currentValue: [],
      rule: {
        custom: {
          checkboxValue: {
            required: () => '请选择一个选项',
          }
        }
      }
    }
  },
mounted () {
   this.$validator.localize('zh_CN', this.rule);
},
getCheckboxValidate (question) {
      var rules = []
      if (question.required) {
        rules.push('required')
      }
      if (question.selectRangeMin) {
        rules.push(`selectRangeMin:${question.selectRangeMin}`)
      }
      console.log(rules.join('|'));
      return rules.join('|')
},
validate () {
   // 验证指定字段
    return this.$validator.validateAll({
        checkboxValue: this.currentValue
    })
},