在Vue中使用表达验证插件vee-validate

第一步安装包:

            在cmd命令行中执行以下代码

//选择安装包的版本
 cnpm install vee-validate@"<3.0.0" --save

第二步创建执行模块:

          在plugins中新建文件validate.js文件引入以下代码

/ 引入Vue
import Vue from 'vue';
// 引入VeeValidate插件
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'
// 声明使用
Vue.use(VeeValidate)
VeeValidate.Validator.localize('zh_CN', {
  // 设置提示信息以中文的方式来展示
  messages: {
    ...zh_CN.messages,

    // 自定义的验证的提示信息
    is:(field)=>`${field}和密码不一致`
  },
  // 设置部分属性翻译成对应的中文,最终用来展示
  attributes: {
    phone: '手机号码',
    code: '短信验证码',
    password: '密码',
    password1: '确认密码',
    isAgree:'协议同意'
  }
});
VeeValidate.Validator.extend('phone', {
  // 返回自己定义的验证规则的提示的信息
  getMessage: field => `请输入正确的` + field,
  validate: value => /^[1]\d{10}$/.test(value)
})

第三步执行模块:

              在main.js入口文件引入此JS文件,让其执行

// 引入validate插件
import './plugins/validate'

第四步执行模块:

           在任意组件中使用方法

 <input type="text" 
    placeholder="请输入验证码"
    v-model="code"
    v-validate="{required:true,regex:/^\d{6}$/}"
    name="code" :class="{valid:errors.has('code')}">
 <span class="error-msg">{{errors.first('code')}}</span>