如题：
在点击Submit按钮后`formData`数据未打印，代码如下：
<template>
<div id="grayBox">
<div id="aboutContactInformationBox">
<div id="contactInformationTitle">{{ contactInformationTitle }}</div>
<div id="contactInformationInputBox">
<el-form label-position="top"
ref="addFormRef"
:model="formData"
:rules="addFormRules"
>
<div class="inputRow" v-for="(itemList, itemIndex) in inputTitleList" :key="itemIndex">
<div class="inputItem" v-for="(item, index) in itemList" :key="index">
<el-form-item class="inputItemTitle" :label="item.inputTitle" :prop="item.inputProp">
<el-input v-model="formData[item.modelName]" @change="changeMsg($event, item.modelName)"
:placeholder="item.inputPlaceholder">
</el-input>
</el-form-item>
</div>
</div>
<el-form-item id="contactInformationSubmitBtn">
<el-button id="submitBtn" @click="submitForm(addFormRef)">{{ submitBtnText }}</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
const contactInformationTitle = "CONTACT INFORMATION"
const inputTitleList = [
[
{
inputTitle: "Full Name",
inputProp: "fullName",
inputPlaceholder: "Fill in your name",
modelName: "fullName",
},
{
inputTitle: "Company Name",
inputProp: "companyName",
inputPlaceholder: "Fill in your company name",
modelName: "companyName",
},
],
[
{
inputTitle: "Email Address",
inputProp: "emailAddress",
inputPlaceholder: "Fill in your email address",
modelName: "emailAddress",
},
{
inputTitle: "Phone",
inputProp: "phoneNum",
inputPlaceholder: "Fill in your phone number",
modelName: "phoneNum",
},
],
]
const submitBtnText = "Submit"
const addFormRef = ref<FormInstance>()
const checkName = (rule, value, cb) => {
if (value == "") {
return cb(new Error("Please fill in your name"))
}
}
const checkCompanyName = (rule, value, cb) => {
if (value == "") {
return cb(new Error("Please fill in your company name"))
}
}
// 验证邮箱的规则
const checkEmail = (rule, value, cb) => {
if (value == "") {
return cb(new Error("Please fill in your email address"))
}
//验证邮箱的正则表达式
const regEmail = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (regEmail.test(value)) {
//合法的邮箱
return cb();
}
//邮箱不合法
cb(new Error("Please enter a valid email address!"));
}
//验证手机号的规则
const checkPhone = (rule, value, cb) => {
if (value == "") {
return cb(new Error("Please fill in your phone number"))
}
//验证电话的正则表达式
const regPhone = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regPhone.test(value)) {
//合法的手机号
return cb();
}
//手机号不合法
cb(new Error("Please enter a valid phone number!"));
}
const formData = reactive({
fullName: "",
companyName: "",
emailAddress: "",
phoneNum: "",
})
const changeMsg = (event, modelName) => {
formData[modelName] = event
}
//添加表单的验证规则
let addFormRules = reactive<FormRules<typeof formData>>({
fullName: [{validator: checkName, trigger: 'blur'}],
companyName: [{validator: checkCompanyName, trigger: 'blur'}],
emailAddress: [{validator: checkEmail, trigger: 'blur'}],
phoneNum: [{validator: checkPhone, trigger: 'blur'}],
})
const submitForm = (formEl: FormInstance | undefined) => {
console.log(formData)
if (!formEl) {
console.log("!FormEl")
}
formEl.validate((valid) => {
if (valid) {
console.log("formData")
} else {
console.log('error submit!')
return false
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>
<style scoped>
@Import "@/assets/css/AboutContactInformation.css";
</style>