async-validator獨立使用指南

<template>
  <div class="container">
    <div class="box">
      <input type="text" name="name" v-model="form.username" />
      <span style="color:red;" v-if="errors.fields && errors.fields.username">{{ errors.fields.username[0].message }}</span>
      <input type="text" name="name1" v-model="form.username1" />
      <span style="color:red;" v-if="errors.fields && errors.fields.username1">{{ errors.fields.username1[0].message }}</span>
      <Button type="primary" @click="_click1">主要按鈕</Button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import schema from "async-validator";
import { Button } from "vant";
import AsyncValidator from "async-validator";

Vue.use(Button);
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      form: {
        username: "",
        username1: ""
      },
      errors: {},
      rules: {
        username: {
          validator: (rule, value, callback) => {
            if (!value) return callback(`該項為必填項`);
            callback();
          }
        },
        username1: {
          validator: (rule, value, callback) => {
            if (!value) return callback(`用戶名長度為3-10`);
            callback();
          }
        }
      }
    };
  },
  methods: {
    async _click1() {
      this.errors = await new AsyncValidator(this.rules).validate(this.form).catch(e => e);
      if (this.errors) return;
      this.errors = {};
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  margin: 0 auto;
  height: 100%;
  margin-bottom: 100%;
  .box {
    display: flex;
    flex-direction: column;
    input {
      width: 300px;
      margin-top: 20px;
    }
  }
}
</style>