验证如何在Vue.js 2.0中运行?

时间:2016-10-21 11:55:14

标签: validation vue.js vuejs2

Vue.js的新手。我用Google搜索并为Vue.js 1.0找到了很多资源,但没有为vue js 2.0找到。

1 个答案:

答案 0 :(得分:0)

Vue.js 2验证与Vue.js版本1非常相似。它只能验证开箱即用的道具。根据{{​​3}},有6种方法可以做到这一点:

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
}) 

如果要进行输入验证,则需要使用库。最受欢迎的是the documentation

将您作为插件添加到Vue应用程序后(通过Vue.use(...)),您可以像这样验证输入:

<div id="app">
  <validator name="validation1">
    <form novalidate>
      <div class="username-field">
        <label for="username">username:</label>
        <input id="username" type="text" v-validate:username="['required']">
      </div>

      </div>
      <div class="errors">
        <p v-if="$validation1.username.required">Required your name.</p>
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
  </validator>
</div>