使用elementUI中表单组件时检验是否为空的功能

使用表单收集数据时，点击提交后检验必填项是否为空是一个很重要的功能，当使用了elementUI后这个问题就变的很简单了。对于简单的事情也是需要学习一遍才能掌握运用，在这里我将会用直白明了的话来为大家讲解"使用elementUI中表单组件时检验是否为空的功能"的详细运用。

以el-input为例(为了方便查看，多余的属性一律没写)：

<template>
    //属性model是必须的，值记为A，属性rules的值为检验规则。
    <el-form :model="formData" :rules="rules">
        //属性prop是必须的，值记为B
        <el-form-item prop="age">
            //属性v-model的值必须是A.B
            <el-input v-model="formData.age">
        </el-form-item>
    </el-form>
</template>

<script setup>
    const rules = reactive({
        //该属性名必须是要检测的属性值B
        age:[{required: true, message: "年龄不能为空", trigger: "blur"}]
    })
</script>

在上述代码的template中，el-form 包裹了 el-form-item，el-form-item 包裹了 el-date-picker 并设置了相应的验证规则。通过 :rules 属性，我们定义了 age必须为非空。

在script中定义rules的检验方法：其中

"required"是HTML表单元素中的一个属性，也可以在一些前端框架（如Vue.js）的表单验证规则中使用。它指示表单元素必须填写值，否则提交表单时会触发验证错误；

"message"属性用于指定在验证失败时显示的错误消息。这个消息将被显示给用户，以便他们了解为什么表单验证失败；

"trigger"是表单验证规则中的一个属性，用于指定触发验证的事件。它告诉验证器在什么时候开始验证表单项，与"blur"一块使用表示当失去焦点时触发检验。