Vue3 | Element-Plus | 表单校验 | form | Validate|提交时调用validate()函数

文章概述：

内容精练实用，是开发中常用的技术。

• 作为初学者，你可以阅读原理解析部分的逐行讲解。
• 作为开发者，你可以收藏，作为手册进行参阅。

实现代码：

<template>部分

<el-form 
    :model="projectForm"
    :rules="relues" 
    ref="form"
>
    <!-- 项目名称 input 输入 -->
    <el-form-item prop="name" label="项目名称">
        <el-input placeholder="请输入名称" v-model="projectForm.name" clearable>
        </el-input>             
    </el-form-item>
    
    <!-- 项目金额 input 输入 -->
    <el-form-item prop="amount" label="项目金额">
        <el-input placeholder="请输入" v-model="projectForm.amount" clearable>
            <template #append>万元</template>
        </el-input>
    </el-form-item>
    
    <!-- 项目状态 select 选择 -->
    <el-form-item prop="status" label="项目状态">
        <el-select
            v-model="projectForm.status"
            placeholder="请选择"
            clearable
        >
            <el-option
                v-for="status in statusDict"
                :label="statusDict.statusStr"
                :value="statusDict.statusCode">
            </el-option>
        </el-select>
    </el-form-item>
    
    <template #footer>
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="confirmForm" type="primary">确 定</el-button>
    </template>

</el-form>

<script>部分

const relues = {
    name: [
        { required: true, message: '请输入项目名', trigger: 'blur' }
    ],
    status: [
        { required: true, message: '请选择项目状态', trigger: 'blur' }
    ],
    amount: [
        { required: true, message: '请输入项目金额', trigger: 'blur' },
        {
            pattern:/^(?:[1-9][0-9]*\.[0-9]+|0\.(?!0+$)[0-9]+|[1-9]+\d*)$/,
            message:"输入正实数",
            trigger:'blur'
        }
    ]
}

提交表单时调用validate()函数

const form = ref()

// 提交表单时，一般包括异步请求，所以需要async修饰
const confirmForm = async () => {
    await form.value.validate()
}

// 作为校验这块内容的实现，可以直接使用下面的代码
const confirmForm = () => {
    form.value.validate()
}

原理解析：