vue3+elemen-plus的表单验证（不使用官方的ts）

<el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号：" prop="username">
          <el-input
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登入</el-button
          >
        </el-form-item>
      </el-form>

<script setup>
import { ref, reactive } from "vue";

const ruleFormRef = ref(null)
const ruleForm = reactive({
  username: "",
  password: "",
});

const rules = reactive({
   username: [
      { required: 'true', message: '账户不能为空', trigger: 'blur' }
    ],
    password: [
      { required: 'true', message: '密码不能为空', trigger: 'blur' }
    ]
});

const submitForm = async () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      return false;
    }
  });
};

</script>

效果：

参考：Form 表单 | Element Plus