阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      VeeValidate 教程

      Vee-Validate 是什么:

      VeeValidate 是 Vue.js 的验证库,它有很多验证规则,并支持自定义规则。它基于模板,因此它与 HTML5 验证 API 相似并且很熟悉。您可以验证 HTML5 输入以及自定义 Vue 组件。它也是以本地化为基础构建的,实际上我们有大约 44 种语言由精彩的社区成员支持和维护。

      一、安装

      npm install vee-validate@next --save
      

      注意:@next, 不然是 Vue1.0 版本

      bower install vee-validate#2.0.0-beta.13 --save
      

      二、引用

      import Vue from 'vue';
      import VeeValidate from 'vee-validate';
      Vue.use(VeeValidate);
      

      组件设置:

      import VeeValidate, { Validator } from 'vee-validate';
      import messages from 'assets/js/zh_CN';
      Validator.updateDictionary({
          zh_CN: {
              messages
          }
      });
      const config = {
          errorBagName: 'errors', // change if property conflicts.
          delay: 0,
          locale: 'zh_CN',
          messages: null,
          strict: true
      };
      Vue.use(VeeValidate,config);
      

      assets/js/zh_CN 代表你存放语言包的目录,从 node_modules/vee-validate/dist/locale 目录下面拷贝到你的项目 Validator 还有更多应用,下面再讲。 config 其它参数,delay 代表输入多少 ms 之后进行校验,messages 代表自定义校验信息,strict=true 代表没有设置规则的表单不进行校验,errorBagName 属于高级应用,自定义 errors,待研究

      三、基础使用

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

      提醒:错误信息里面的名称通常就是表单的 name 属性,除非是通过 Vue 实例传递进来的。 提醒:养成好习惯,给每个 field 添加 name 属性,如果没有 name 属性又没有对值进行绑定的话,validator 可能不会对其进行正确的校验

      关于 errors:

      上面的代码我们看到有 errors.has,errors.first,errors 是组件内置的一个数据模型,用来存储和处理错误信息,可以调用以下方法:

      errors.first('field') - 获取关于当前field的第一个错误信息
      collect('field') - 获取关于当前field的所有错误信息(list)
      has('field') - 当前filed是否有错误(true/false)
      all() - 当前表单所有错误(list)
      any() - 当前表单是否有任何错误(true/false)
      add(String field, String msg) - 添加错误
      clear() - 清除错误
      count() - 错误数量
      remove(String field) - 清除指定filed的所有错误
      

      关于 Validator

      Validator 是以 $validator 被组件自动注入到 Vue 实例的。同时也可以独立的进行调用,用来手动检查表单是否合法,以传入一个对象的方式,遍历其中指定的 field。

      import { Validator } from 'vee-validate';
      const validator = new Validator({
          email: 'required|email',
          name: 'required|alpha|min:3',
      });
      // or Validator.create({ ... });
      

      你也可以在构造了 validator 之后设置对象参数

      import { Validator } from 'vee-validate';
      const validator = new Validator();
      
      validator.attach('email', 'required|email'); // attach field.
      validator.attach('name', 'required|alpha', 'Full Name'); // attach field with display name for error generation.
      
      validator.detach('email'); // you can also detach fields.
      

      最后你也可以直接传值给 field,测试是否可以通过校验,像这样:

      validator.validate('email', 'foo@bar.com'); // true
      validator.validate('email', 'foo@bar'); // false
      //或者同时校验多个:
      validator.validateAll({
          email: 'foo@bar.com',
          name: 'John Snow'
      });
      //只要有一个校验失败了,就返回false
      

      四、内置的校验规则

      after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY)
      alpha - 只包含英文字符
      alpha_dash - 可以包含英文、数字、下划线、破折号
      alpha_num - 可以包含英文和数字
      before:{target} - 和after相反
      between:{min},{max} - 在min和max之间的数字
      confirmed:{target} - 必须和target一样
      date_between:{min,max} - 日期在min和max之间
      date_format:{format} - 合法的format格式化日期
      decimal:{decimals?} - 数字,而且是decimals进制
      digits:{length} - 长度为length的数字
      dimensions:{width},{height} - 符合宽高规定的图片
      email - 不解释
      ext:[extensions] - 后缀名
      image - 图片
      in:[list] - 包含在数组list内的值
      ip - ipv4地址
      max:{length} - 最大长度为length的字符
      mimes:[list] - 文件类型
      min - max相反
      mot_in - in相反
      numeric - 只允许数字
      regex:{pattern} - 值必须符合正则pattern
      required - 不解释
      size:{kb} - 文件大小不超过
      url:{domain?} - (指定域名的)url
      

      五、自定义校验规则

      1. 直接定义

      const validator = (value, args) => {
          // Return a Boolean or a Promise.
      }
      //最基本的形式,只返回布尔值或者Promise,带默认的错误提示
      

      2. 对象形式

      const validator = {
          getMessage(field, args) { // 添加到默认的英文错误消息里面
              // Returns a message.
          },
          validate(value, args) {
              // Returns a Boolean or a Promise.
          }
      };
      

      3. 添加到指定语言的错误消息

      const validator = {
          messages: {
              en: (field, args) => {
                  // 英文错误提示
              },
              cn: (field, args) => {
                  // 中文错误提示
              }
          },
          validate(value, args) {
              // Returns a Boolean or a Promise.
          }
      };
      

      创建了规则之后,用 extend 方法添加到 Validator 里面

      import { Validator } from 'vee-validate';
      const isMobile = {
          messages: {
              en:(field, args) => field + '必须是11位手机号码',
          },
          validate: (value, args) => {
             return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
          }
      }
      Validator.extend('mobile', isMobile);
      
      //或者直接
      
      Validator.extend('mobile', {
          messages: {
            en:field => field + '必须是11位手机号码',
          },
          validate: value => {
            return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
          }
      });
      

      然后接可以直接把 mobile 当成内置规则使用了:

      <input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile">
      <span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>
      

      4. 自定义内置规则的错误信息

      import { Validator } from 'vee-validate';
      
      const dictionary = {
          en: {
              messages: {
                  alpha: () => 'Some English Message'
              }
          },
          cn: {
              messages: {
                  alpha: () => '对alpha规则的错误定义中文描述'
              }
          }
      };
      
      Validator.updateDictionary(dictionary);
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录