Vue 笔记

[TOC]

github

https://github.com/kazupon/vue-validator/tree/2.x/docs/zh-cn

安装

CDN

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.28-csp/vue.js"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.6/vue-validator.js"></script>

入门

var vue = new Vue({
  el: '#app'
})
  • validator元素
    把表单放在该元素下面即可
  • v-validate 指令
    该指令用来指定验证条件
<div id="app">
<validator name="validation1">
    <form novalidate>
      <div class="username-field">
        <label for="username">用户名:</label>
        <input id="username" type="text" v-validate:username="['required']">
      </div>
      <div class="comment-field">
        <label for="comment">内容:</label>
        <input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
      </div>
      <div class="errors">
        <p v-if="$validation1.username.required">用户名必填</p>
        <p v-if="$validation1.comment.maxlength">最大不能超过256长度</p>
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
</validator>
</div>

ps

验证器名称不要与 Vue.js 中的自带属性重复,如 $event

验证结果结构

验证结果保存在如下结构中

{
  // 顶级验证属性
  valid: true,
  invalid: false,
  touched: false,
  undefined: true,
  dirty: false,
  pristine: true,
  modified: false,
  errors: [{
    field: 'field1', validator: 'required', message: 'required field1'
  }, ... {
    field: 'fieldX', validator: 'customValidator', message: 'invalid fieldX'
  }],

  // field1 validation
  field1: {
    required: false, // build-in validator, return `false` or `true`
    email: true, // custom validator
    url: 'invalid url format', // custom validator, if specify the error message in validation rule, set it
    ...
    customValidator1: false, // custom validator
    // field validation properties
    valid: false,
    invalid: true,
    touched: false,
    undefined: true,
    dirty: false,
    pristine: true,
    modified: false,
    errors: [{
      validator: 'required', message: 'required field1'
    }]
  },

  ...

  // fieldX validation
  fieldX: {
    min: false, // validator
    ...
    customValidator: true,

    // fieldX validation properties
    valid: false,
    invalid: true,
    touched: true,
    undefined: false,
    dirty: true,
    pristine: false,
    modified: true,
    errors: [{
      validator: 'customValidator', message: 'invalid fieldX'
    }]
  },
}

全局结果可以直接从验证结果中获取到,字段验证结果保存在以字段名命名的键下

字段验证结果

valid: 字段有效时返回 true,否则返回 false

invalid: valid相反结果

touched: 字段获得过焦点时返回 true,否则返回 false

untouched: touched 相反结果

modified: 字段值与初始值不同时返回 true,否则返回 false

dirty: 字段值改变过至少一次时返回 true,否则返回 false

pristine: dirty 相反结果

errors: 字段无效时返回存有错误信息的数据,否则返回 undefined

全局结果

valid: 所有字段都有效时返回 true,否则返回 false。

invalid: 只要存在无效字段就返回 true,否则返回 false。

touched: 只要存在获得过焦点的字段就返回 true,否则返回 false。

untouched: touched 的逆。

modified: 只要存在与初始值不同的字段就返回 true,否则返回 false。

dirty: 只要存在值改变过至少一次的字段就返回 true,否则返回 false。

pristine: 所有字段都没有发生过变化时返回 true,否则返回 false。

errors: 有无效字段时返回所有无效字段的错误信息,否则返回 undefined。

验证器语法

自定义验证时机

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.基本绑定: new Vue( { el:'#elID', data:{ ...
    寒剑飘零阅读 547评论 0 1
  • vue中的MVVM模式 即Model-View-ViewModel。 Vue是以数据为驱动的,Vue自身将DOM和...
    w_zhuan阅读 263评论 0 1
  • Vue笔记六:Vue项目的性能优化之路 我最近也经常面试外包同事。面试的时候,总会有个问题,“你说一下性能优化的手...
    brandonxiang阅读 6,846评论 5 22
  • Vue笔记七: Vue的自动化测试 前言 为什么我们需要测试? 让产品可以快速迭代,同时还能保持高质量 -- 阮一...
    brandonxiang阅读 16,065评论 2 10
  • v-model: 在表单元素上创建双向数据绑定。 v-if 条件渲染指令,它根据表达式的真假来删除和插入元素 ...
    ROBIN2015阅读 221评论 0 0