一 typescript 定义部分。

1.1 引入FormInstance, FormRules

import type { FormInstance, FormRules } from 'element-plus';

1.2 定义表单 及校验规则

#表单数据定义
interface iStaffInfo {
	tname: string;
	mobile: string;
	rid:number;	
}
//  <el-form  :rules="createRules"
#校验规则
const createRules: FormRules = {
	tname: [{required: true,message: '请输入员工名称',trigger: 'blur'}	],
	mobile: [{ required: true, message: '请输入有效手机号码', trigger: 'blur' }],
};


//  <el-form :model="createStaffModel" :rules="rules"
#表单model  html 部分 :model = "createStaffModel"
const createStaffModel = reactive<iStaffInfo>({
	tname: '',
	mobile: '',
    rid:1
});

1.3 定义表单instance,和表单数据

//  <el-form ref="staffForm"
const staffForm = ref<FormInstance>();

二 html 部分。

<el-form :model="createStaffModel" :rules="createRules" ref="staffForm" label-width="0px" class="ms-content">
				<el-form-item prop="tname">
					<el-input v-model="createStaffModel.tname" placeholder="员工姓名">
						<template #prepend>
							<el-button :icon="User"></el-button>
						</template>
					</el-input>
				</el-form-item>
				....
				<div class="login-btn">
					<el-button type="primary" @click="submitForm(staffForm)">登录</el-button>
				</div>
</el-form>

三 表单提交及业务处理

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid: boolean) => {
        if(valid) {
            request({
                 url: '/api_url',
                  method: 'post',
                  data:{
                    xxx
                  } 
            }).then(function (response) {
                handleResponse(response);                
            });
        }
        
    });
}