vue + nuxt + vee-validate（表单验证）

安装

npm install vee-validate --save

plugins文件创建veevalidate.js

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

Validator.localize('cn', zh_CN);
const dict = {
    cn: {
        messages: {
            required: (name) => `${name}不能为空!`
        },
        attributes:{
            phone:'密码'
        }
    }
};
Validator.localize(dict);

//手机号码
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)
    }
});

页面应用

<input type="text" placeholder="请输入手机号" name="phone" v-validate="'required|phone'">
<span v-show="errors.has('phone')">{{ errors.first('phone')}}</span>
<span @click="save()">登录</span>


save(){
      this.$validator.validate().then(result => {
      if (!result) {
            // do stuff if not valid.
         }
      });
 }

【--------nuxt项目搭建---------】

//安装vue-cli框架
npm install vue-cli -g

//使用init命令来初始化Nuxt.js项目 
vue init nuxt/starter

//使用npm install安装依赖包
npm install

//启动项目
npm run dev

欢迎关注【哎呦程序猿公众号】，带给你更多前端干货！