一个简单的例子：vue3 elment ui plus组件表单验证——基于ref的组合式api写法

官方的文档我不会弄。这里记一个简单的表单验证写法。

1.使用ref和组合式api写法。我发现使用ref之后会自动绑定验证过程，不需要写验证函数。

2.el-form的model 、ref绑定同一ref数据对象，rules绑定验证规则，el-form-item绑定prop参数名。 

<template>
  <el-container>
    <el-header>
    </el-header>
    <el-main>
      <el-form :model="formdata" :rules="rules" :ref="formdata" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formdata.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formdata.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script setup>
import { ref } from 'vue'
const formdata = ref({
  username: '',
  password: '',
})

const rules = ref({
  username: [
    { required: true, message: '请输入正确的用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度 3 到 20个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入正确的密码', trigger: 'blur' },
    { min: 8, max: 20, message: '长度 8 到 20个字符', trigger: 'blur' },
  ]
})

function onSubmit() {
  console.log('formdata', formdata.value)
}
</script>
<style scoped>

</style>

效果：