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