vue2 中 iview 框架单独表单校验

<template>
  <div>
    <Form ref="form" :model="formData" :rules="formRules">
      <FormItem label="用户名" prop="username">
        <Input v-model="formData.username" @blur="handleUsernameBlur"></Input>
      </FormItem>
      <Button type="primary" @click="submitForm">提交</Button>
    </Form>
  </div>
</template>

<script>
import { Form, FormItem, Input, Button } from 'iview';

export default {
  components: {
    Form,
    FormItem,
    Input,
    Button
  },
  data() {
    return {
      formData: {
        username: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度需在 3 到 20 个字符之间', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleUsernameBlur() {
      this.$refs.form.validateField('username', (errorMessage) => {
        if (!errorMessage) {
          console.log('用户名输入校验通过，执行相关函数');
          // 在这里执行你想要的函数
          // 比如调用一个接口发送用户名数据等
        } else {
          console.log('用户名输入校验不通过');
        }
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('表单整体校验通过');
        } else {
          console.log('表单整体校验不通过');
          return false;
        }
      });
    }
  }
};
</script>