vee-validate表单验证（自定义验证规则）

【安装】

首先记得

npm install vee-validate

留意版本

vue2只能用2.x的版本，vue3可以用后面的新版本。这里用的是2

【流程】

1.首先要在main.js中导入，以确保你能在这个项目中使用它

import '@/utils/validate'

这里的文件设计思路是：把自定义的部分作为一个单独的文件（src\utils\validate.js）去整理，需要的正则是另一个文件（src\utils\reg.js）

2.一些正则示例（src\utils\reg.js）

//用于限制加入购物车数量
export const goodNumReg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
//手机号正则
export const phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
//验证码正则
export const codeReg = /^\d{6}$/
//密码正则
export const pwdReg = /^\w{6,21}$/

3.在你需要使用的文件中做基础配置（src\utils\validate.js）

//引入vue
import Vue from 'vue';
//引入VeeValidate核心库、Validator自定义验证规则
import VeeValidate,{Validator} from 'vee-validate';
//引入中文语言包
import zh_CN from 'vee-validate/dist/locale/zh_CN'
//引入正则
import {phoneReg,codeReg,pwdReg} from '@/utils/reg'
//使用插件
Vue.use(VeeValidate)

4.在Validator中自定义规则

//手机号的验证规则
Validator.extend('phone', {
	validate: value => phoneReg.test(value),//验证规则，value是我们输入的值
  getMessage: filed => '手机号格式不合法！', //验证失败的回调
});

//验证必要性的规则
Validator.extend('required', {
	validate:(value) => value,//验证规则，value是我们输入的值
  getMessage: (field) => field + '必须输入！', //验证失败的回调
});

//验证码的验证规则
Validator.extend('code', {
	validate: value => codeReg.test(value),//验证规则
  getMessage: filed => '验证码必须为6位数字！', //验证失败的回调
});

//密码的验证规则
Validator.extend('pwd', {
	validate: value => pwdReg.test(value),//验证规则
  getMessage: filed => '密码为6到21位英文、数字、下划线', //验证失败的回调
});

//重复密码的验证规则
Validator.extend('ispwd', {
	validate: (value,args) => value === args[0],//验证规则
 	getMessage: filed => '重复密码必须和登录密码一致', //验证失败的回调
});

//协议规则
Validator.extend('isagree', {
	validate: value => value,//验证规则
  getMessage: filed => '协议必须同意！', //验证失败的回调

5.在页面中使用validator进行验证

<!-- 手机号 -->
<div class="content">
	<label>手机号:</label>
	<input 
		type="text" 
		placeholder="请输入你的手机号" 
		v-model="phone"
		v-validate="'required|phone'" 
    【也可以这么写： v-validate="{required:true,phone:true}"】
  	name="手机"
 	/>
  	 	<span class="error-msg">{{ errors.first('手机') }}</span>
  	 </div>  

① v-validate="{required:true,phone:true}"或者v-validate="'required|phone'" 里的required和phone都是上面写过的规则

② name是必须写的，这个name用来匹配下面的失败信息

③ errors.first中的参数就是name,必须要一样

6.验证所有输入项

let validateResult = await this.$validator.validateAll()

//注册按钮的回调
async handleRegister(){
  //验证所有输入项
  let result = await this.$validator.validateAll()
  //如果所有输入项，都验证通过
  if(result){
    /*********/
  }
}

所有输入项都完成后才能进行下一步

【以上】