Element Plus 表单校验

原理

• 为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值
• :model和:rules中字段的名称需要一致
  

示例：

<template><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"><el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({name: ""
});const rules = reactive({name: [{ required: true, message: "请输入用户名", trigger: "blur" },{ min: 3, max: 5, message: "用户名长度在 3 到 5 个字符", trigger: "blur" }]
});const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) return;await formEl.validate((valid, fields) => {if (valid) {console.log("数据正常");} else {console.log("数据有误", fields);}});
};
</script>