vue3+typescript+elementPlus实现表单的单字段校验、取消校验结果、去除、属性

---

html

<el-form ref="refRuleForm" :model="formData" :rules="rules" label-width="120px" :size="formSize" status-icon>
	<el-form-item label="标题" prop="title" maxlength="100" placeholder="请输入标题...">
		<el-input v-model="formData.title" />
	</el-form-item>
	<el-form-item>
		<template #default>
			<div class="p_a r_0 m_t_20">
				<el-button type="primary" @click="submitForm">提交</el-button>
			</div>
		</template>
	</el-form-item>
</el-form>

---

typescript

let refRuleForm = ref(undefined),
	formData: any = ref({
     
     
		title: '',
	}),
	rules: any = reactive({
     
     
		title: [
			{
     
      required: true, message: '请输入标题', trigger: 'blur' },
			{
     
      min: 2, max: 100, message: '标题字数应在2~100之间', trigger: 'blur' }
		]
	});

function submitForm() {
     
     
	// 校验该表单项，如果不通过重新显示校验结果
	refRuleForm.value?.validateField('title');
	
	// 移除该表单项的校验结果
	refRuleForm.value?.clearValidate('title');
}

vue3语法糖<script setup lang="ts"></script>

---

当表单项校验通过时无法重新显示校验结果。