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。

验证器语法

自定义验证时机