如何在vue3 + ts 环境下使用 element-plus 的 from表单，并进行验证

①   创建 <el-form>和<el-form-item>

②   elform配置 ，重点是需要:model  和  ref。rules和官网一致就可以

    <el-form
      label-position="left"
      label-width="formWidth"
      ref="loginForm"
      :model="inputValue"
      :rules="rules"
    >

③   el-form-item配置，prop的名字和 v-model中的 要一致

      <el-form-item label="用户名" prop="uname" ref="formItemName">
        <el-input v-model="inputValue.uname" :placeholder="placeholder.n">
        </el-input>
      </el-form-item>

④   数据验证能够成功 的关键，在提交函数中要使用异步函数！

    const goLogin = async ()=>{
      if (!loginForm.value) return;
      else 
      try {
        await loginForm.value.validate('blur');
        console.log(state.inputValue.uname);
      } catch (error) {
        throw new Error('表单验证失败')
      }
    }

不多说，完整代码如下：

HTML 部分：

<template>
  <div id="loginContainer">
    <el-form
      label-position="left"
      label-width="formWidth"
      ref="loginForm"
      :model="inputValue"
      :rules="rules"
    >
      <el-form-item label="用户名" prop="uname" ref="formItemName">
        <el-input v-model="inputValue.uname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="psword" ref="formItemPassword">
        <el-input v-model="inputValue.psword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="goLogin">确定</el-button>
        <el-button type="primary" plain @click="goReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

ts部分

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { ElFormItemContext } from 'element-plus/es/tokens';

export default defineComponent({
  name: 'login',
  setup() {
    const loginForm = ref<ElFormItemContext>();
    const state = reactive({
      inputValue:{
        uname:'',
        psword:''
      },
      rules:{
        uname:[
          {
            required:true,
            message:'用户名不能为空',
            trigger:'blur'
          }
        ],
        psword:[
          {
            required:true,
            message:'密码不能为空',
            trigger:'blur'
          },
          {
            min:6,
            max:18,
            message:'密码长度需要在6-18位之间',
            trigger:'change'
          }
        ]
      },
      formWidth:'120px',
    });

    const goLogin = async ()=>{
      if (!loginForm.value) return;
      else 
      try {
        await loginForm.value.validate('blur');
        console.log(state.inputValue.uname);
      } catch (error) {
        throw new Error('表单验证失败？')
      }
    }
    const goReset = ()=>{
      loginForm.value?.resetField();
    }
    return {
      ...toRefs(state),
      goLogin,
      goReset,
      loginForm
    }
  },
});
</script>

我是站在巨人的肩膀上的，参考博文：

vue3+element-plus实现form表单提交_Lschange的博客-CSDN博客