vue爬坑——vee-validate的使用

vue爬坑——vee-validate的使用

1、npm安装vee-validate

npm install vee-validate --save

安装时要注意安装的版本，不同的版本使用的方式不一样，这里我安装的是”^2.0.0-rc.26”。
具体版本的使用见官网：vee-validate官网

2、main.js里引用vee-validate插件

import Vue from 'vue'
import VeeValidate,{ Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'

Vue.use(VeeValidate);

3、vee-validate提示语汉化

//提示语汉化
Validator.locale ==="en" ? "zh_CN" : "en";
Validator.localize(Validator.locale,{
    messages: zh_CN.messages,
    attributes:{
        loginName:'登录名',
        loginPassword:'密码'
    }
});

4、验证方法扩展

Validator.extend('phone', {
getMessage: (field, [args]) => `请输入正确的手机号码`,
validate: (value, [args]) =>{
const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
return reg.test(value) 
    }  
});

5、组件中使用

<form class="form" autocomplete="off" @submit.prevent="formSubmit">
  <div class="form-item">
    <input type="text" placeholder="请输入手机号" v-model="loginName" name="loginName" id="loginName" v-validate.initial="'required|phone'" maxlength="11" :class="{'valid-error':errors.has('loginName')}"/>
  </div>
  <div class="form-item">
    <input type="password" placeholder="请输入密码" v-model="loginPassword" maxlength="18" name="loginPassword" id="loginPassword" :class="{'valid-error':errors.has('loginPassword')}" v-validate.initial="'required|password'" />
  </div>
  <div class="form-item clearfix">
    <router-link to="" class="login-link color-blue login-forget fr"><span class="iconfont icon-wenhao" replace></span>忘记密码</router-link>
  </div>
  <button class="form-btn bg-blue" type="submit">登录</button>
</form>