一、基础使用
El-Form-Item 是基于 Element-UI 的表单组件，用于包裹表单控件并对其进行验证和提示。它通常与 El-Form、El-Input、El-Select 等表单组件一起使用，可以对用户输入进行实时验证和错误提示。
在使用 El-Form-Item 时，我们需要在其下方的表单控件中添加 prop 属性，并将其绑定到 El-Form-Item 上，以告诉 El-Form-Item 需要验证哪个表单控件。同时，我们还需要设置 label 属性，用于描述该表单控件的用途。以下是一个简单的示例：
<el-form :model="form" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
上述代码中，我们使用了 El-Form-Item 包裹了一个 El-Input 组件，并将 prop 属性绑定到了 form 对象的 username 属性上，以便于进行表单验证。同时，我们设置了 label 属性为“用户名”，用于描述该表单控件的用途。
二、表单验证
El-Form-Item 提供了多种表单验证方式，包括必填项、长度限制、正则表达式验证等。以下是一些常见的验证方式：
（一）必填项验证
必填项验证是指用户必须填写该表单控件，否则会提示用户错误信息。我们可以通过设置 rules 属性来实现必填项验证，如下所示：
<el-form :model="form" label-width="80px">
<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名' }]">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
上述代码中，我们通过设置 rules 属性为一个包含 required 和 message 属性的对象的数组来实现必填项验证。当用户未填写该表单控件时，El-Form-Item 会提示用户“请输入用户名”的错误信息。
（二）长度限制验证
长度限制验证是指用户输入的内容必须满足一定的长度要求，如最少输入几个字符、最多输入几个字符等。我们可以通过设置 rules 属性来实现长度限制验证，如下所示：
<el-form :model="form" label-width="80px">
<el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' },{min:6,max:20,message:'密码长度为6-20个字符'}]">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
上述代码中，我们通过设置 rules 属性为一个包含 min、max 和 message 属性的对象的数组来实现长度限制验证。当用户输入的密码长度不在 6-20 个字符范围内时，El-Form-Item 会提示用户“密码长度为 6-20 个字符”的错误信息。
（三）数值范围验证
数值范围验证是指用户输入的内容必须满足一定的数值范围要求。我们可以通过设置 rules 属性来实现数值范围验证，如下所示：
<el-form :model="form" label-width="80px">
<el-form-item label="年龄" prop="age" :rules="[{ type: 'number',min:18,max:60,message:'年龄必须在18岁到60岁之间' }]">
<el-input type="number" v-model.number="form.age"></el-input>
</el-form-item>
</el-form>
上述代码中，我们通过设置 rules 属性为一个包含 type、min、max 和 message 属性的对象的数组来实现数值范围验证。当用户输入的年龄不在 18-60 岁范围内时，El-Form-Item 会提示用户“年龄必须在 18 岁到 60 岁之间”的错误信息。
（四）正则表达式验证
正则表达式验证是指用户输入的内容必须满足一定的格式要求，如电话号码、邮箱等。我们可以通过设置 rules 属性来实现正则表达式验证，如下所示：
<el-form :model="form" label-width="80px">
<el-form-item label="手机号" prop="phone" :rules="[{ pattern: /^1\d{10}$/, message: '请输入正确的手机号码' }]">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>
上述代码中，我们通过设置 rules 属性为一个包含 pattern 和 message 属性的对象的数组来实现正则表达式验证。当用户输入的手机号码格式不正确时，El-Form-Item 会提示用户“请输入正确的手机号码”的错误信息。
三、表单提示
除了对表单控件进行验证之外，El-Form-Item 还可以对表单进行提示。我们可以通过设置 label 属性和 prop 属性来进行表单提示，如下所示：
<el-form :model="form" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
<template slot="error">{{errorMsg}}</template>
</el-form-item>
</el-form>
上述代码中，我们通过设置 label 属性和 prop 属性来进行表单提示。当用户将鼠标移动到“用户名”这个标签上时，El-Form-Item 会提示用户该表单控件的用途。同时，我们在 El-Form-Item 内部添加了一个 slot="error" 的 template 标签，用于显示错误信息。当该表单控件出现错误时，El-Form-Item 会将错误信息渲染到该 template 标签中。
四、小结
El-Form-Item 是一个非常实用的表单验证组件，它可以对表单控件进行多种验证方式，并且可以对表单进行提示。在使用 El-Form-Item 时，我们需要注意必填项、长度限制、数值范围和正则表达式等方面的验证，以保证表单数据的正确性。
