美文网首页
vee-validate的使用

vee-validate的使用

作者: 星球小霸王 | 来源:发表于2017-10-17 10:33 被阅读0次

1.安装

  cnpm install vee-validate --save

2.在assets文件夹下创建一个validate.js文件

'use strict';
import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//引入中文文件
// 配置中文
Validator.addLocale(zh);

const config = {
  locale: 'zh_CN'
};

Vue.use(VeeValidate,config);

// 自定义validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '请输入正确的邮箱格式',
        required: ( field )=> "请输入" + field
      },
      attributes:{
        email:'邮箱',
        password:'密码',
        name: '账号',
        phone: '手机'
      }
  }
};

Validator.updateDictionary(dictionary);


//扩展自定义的验证,比如这边自定义了电话的表单验证。

Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必须是11位手机号码',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

3.在main.js中引入这个js文件

import "./assets/validata.js"

4.使用
在 HelloWord.vue文件中写入一下测试代码

<p>
          <input v-validate="'required|email'" name="email" type="text" placeholder="Email">
          <span v-show="errors.has('email')"  >{{ errors.first("email") }}</span>
        </p>
        <p>
          <input v-validate="'required|phone'" name="phone" type="text" placeholder="phone">
          <span v-show="errors.has('phone')"  >{{ errors.first("phone") }}</span>
         </p>

5.运行

npm run dev

详细信息请参阅
http://www.jianshu.com/p/bd606e194392

相关文章

  • Vue-validate使用初探

    vue-validate的使用 import VeeValidate from 'vee-validate' im...

  • vee-validate升级引发的错误

    "vee-validate": "^3.3.0","vee-validate": "^2.0.0-rc.26", ...

  • vue2 项目开发使用到的东东

    表单验证使用的是 vee-validate ui组件使用的是 bootstrap element时间选择组件 v...

  • vee-validate使用

    问题:输入不上内容原因:input的初始值要保证为一个字符串,不可以是 undefined 中文:参考文章vue表...

  • vee-validate的使用

    1.安装 2.在assets文件夹下创建一个validate.js文件 3.在main.js中引入这个js文件 4...

  • vee-validate插件的使用

    使用说明 npm install vee-validate@2.0.0-rc.25 项目目录里头安装 当前页面上的...

  • vee-validate使用教程

    vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的...

  • Vee-validate组件使用

    项目地址 vee-validate 写在前面 笔者在写项目时,使用了vue-cli构建工具,默认使用了vue-ro...

  • vee-validate 使用问题

    一、校验规则 1、使用between、length时,默认的错误提示消息在显示的时候,内容会出现如下问题 解决方案...

  • vee-validate使用教程

    vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的...

网友评论

      本文标题:vee-validate的使用

      本文链接:https://www.haomeiwen.com/subject/jkgruxtx.html