vee-validate 表单验证

最新推荐文章于 2024-02-22 14:41:01 发布

MakeGreatEffort

最新推荐文章于 2024-02-22 14:41:01 发布

阅读量1.2w

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

120 篇文章 6 订阅

订阅专栏

----好记性不如烂笔头，掌握知识的最好方法莫过于把他记录下来

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

使用教程：

1 安装：

npm install vee-validate --save

2 使用中文提示(按照教程捣鼓了，不行，自己摸索的写法。)
main.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);

看效果：