vee-validate 表单验证

分类: Vue

vee-validate

vee-validate 一个轻量级的 vue表单验证插件。

 

 使用教程:

1 安装:

npm install vee-validate --save


2 使用 中文提示(按照教程捣鼓了,不行,自己摸索的写法。)
main.js or app.js添加

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);


3使用

第一个例子:

<div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
        <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
        <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
    </p>
</div>

简化写,只看有用代码:

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

关于 提示:errors

==>errors.has('email')

==>errors.first('email')

这是什么玩意儿。莫急

直接输出 {{errors}}就可以看到,验证的时候返回的是个json数据

{
    "errors": [
        {
            "field": "email",
            "msg": " email 必须是有效的邮箱.",
            "rule": "email",
            "scope": "__global__"
        }
    ]
}

解释如下:

errors.first('field') -- 获取关于当前field的第一个错误信息

collect('field') -- 获取关于当前field的所有错误信息(list)

has('field') -- 当前filed是否有错误(true/false)

all() -- 当前表单所有错误(list)

any() -- 当前表单是否有任何错误(true/false)

 

tip:关于样式,在项目中可以根据需求选择,是使用自己的或者是现成的样式库(作者使用的是 Font Awesome)。

 

4 ok前方高能。最关心的莫过于自定义规则,或者修改规则

①:怎么修改默认的属性

 

这个是默认的,怎么自定义。。。

就是将 email 字段改为 邮箱或者随意字段。

 

方法一:

const dictionary = {
   zh_CN: {
    messages: {
      email: () => '这个邮箱有毒'
    },
     attributes:{
       email:'--邮箱--'
     }
  }
};
Validator.updateDictionary(dictionary);

提示语

 

为空时

 

方法二:

 

官方给出的自定义组件demo,前提是你定义了 custom-input

<div class="columns is-multiline">
    <div class="column is-12">
        <custom-input v-validate="'required|email'" data-vv-value-path="innerValue" data-vv-name="custom" label="Email" :has-error="errors.has('custom')">
        </custom-input>
        <span v-show="errors.has('custom')" class="help is-danger">{{ errors.first('custom') }}</span>
        <button @click="validate" type="button" class="button is-primary">Validate All</button>
    </div>
</div>

 

但是你可以忽略,有现成的input干嘛不用

<div>
    <input v-validate="'required|email'" data-vv-name="丫" label="Email" :has-error="errors.has('丫')" />
    <span v-show="errors.has('丫')" class="help is-danger">{{ errors.first('丫') }}</span>
</div>

 

ok,看效果

 

 

 

②增加自己的规则

添加手机号验证

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)
  }
});

 

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

 

③当使用 required 规则验证时,输入为空时提示:xxx是必须的,真是要疯了。

如何修改:就一句话搞定

required:(field)=> "请输入"+field

 

其实就是覆盖他的规则,完整版:

const dictionary = {
  zh_CN: {
    messages:{
      //email: () => '这个邮箱有毒',
       ....
      required:(field)=> "请输入"+field
    },
    attributes: {
     ......
    }
  }
};
Validator.updateDictionary(dictionary);

 

看效果:

 

④官方提供了好多现成的规则 Rules

 

使用方法,

v-validate="'required|max:6|email'"

实现功能:

①required:为空时提示

②max:最多可以输入6个字符

③email:邮箱验证

标签: Vue.js

上一篇: install node-sass出错,提示not found: python2

下一篇: 没有了

by 2019-03-31 13:58:37

0 条评论