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>