Vue的自定义校验方式 veeValidate 3.0的使用

• 如果想要深度详细学习,可以去官网 veeValidate官方网站

首先下载相关的依赖包

npm install vee-validate --save

从依赖包中引入相关组件,并挂载到Vue组件上。

import { ValidationProvider, ValidationObserver, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules"; 
import validate from "./validate.js";//自己设定的校验脚本
/*单个校验 可以只使用就可以完成 ValidationProvider，
但是组合校验就要使用ValidationObserver和ValidationProvider组合起来使用了,
extend是校验方法的扩张方法，既可以新增自定义的方法，也可以重写依赖包中已有的方法，比如本文中的required*/
extend("required", {
  ...required,
  message: "此项必填",//自定义校验失败的提示语句
});
extend("veePositiveInteger", {
  validate: validate.veePositiveInteger,
});//自己设置的自定义校验方法

//可以局部注册
new Vue({ el: '#app', components: { ValidationProvider, ValidationObserver } })
//或者全局注册
Vue.component('ValidationProvider',ValidationProvider)
Vue.component('ValidationObserver',ValidationObserver)

准备工作做好了可以开始校验了

下面是个使用范例

./validate.js:

let veePositiveInteger = (value) => {
  let reg = /^[1-9][0-9]*$/; //正整数 非零开头的数字
  if (value) {
    if (reg.test(value)) {
      return true;
    } else {
      return "请输入一个正整数";
    }
  } else {
    return "不能为空";
  }
};
let veePositiveNumber = (value) => {
  let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //正数，包括小数
  if (value) {
    if (reg.test(value)) {
      return true;
    } else {
      return "请输入一个正数";
    }
  } else {
    return "不能为空";
  }
};
export default {
  veePositiveInteger,
  veePositiveNumber,
};

相关的Vue页面

<template>
  <div>
    <ValidationObserver ref="observe">
      <ValidationProvider rules="required" v-slot="{ errors }">
        <el-checkbox-group v-model="checkedCities">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <p class="validate-span">{{ errors[0] }}</p>
      </ValidationProvider>
      <ValidationProvider rules="required" v-slot="{ errors }">
        <el-select
          v-model="value1"
          multiple
          placeholder="请选择"
          :class="{ 'error-txt': errors[0] }"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <p class="validate-span">{{ errors[0] }}</p>
      </ValidationProvider>
    </ValidationObserver>
    <div>
      <el-button @click="validateClick">校验</el-button>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend } from "vee-validate"; //自定义校验的方法
import { required } from "vee-validate/dist/rules";
extend("required", {
  ...required,
  message: "此项必填",
});
export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  data() {
    return {
      value1: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      checkedCities: [],
      cities: ["上海", "北京", "广州", "深圳"],
    };
  },
  methods: {
    validateClick() {
      this.$refs.observe.validate().then((res) => {
        console.log("validate === ", res);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.validate-span {
  font-size: 12px;
  color: tomato;
}
/deep/.el-select.error-txt .el-input__inner {
  border: 1px solid tomato !important;
}
</style>

弯路提醒：必填校验的时候，建议还是在官网自带的required组件基础上，进行自己相关的自定义内容的修改。自定义的校验函数可以对简单类型的数据进行必填校验的处理，而引用类型的数据在自定义校验函数上处理必填校验操作时会比较麻烦。

项目常用的正则表达式总结:

let reg = /^[1-9][0-9]*$/; //正整数 非零开头的数字
let reg = /^[+-]?\d+(.\d)?$/;   //只能输入整数或者一位小数
let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //正数，包括小数
//...未完待续