在前端开发中，表单验证是一个很重要的环节，能够有效避免用户在输入数据时出现错误。Vue.js 是一个流行的前端框架，而 Element-UI 是一个基于 Vue.js 的 UI 组件库，提供了丰富的表单验证功能。本文将介绍如何在 Vue.js 中使用 Element-UI 的表单验证。
Element-UI 的表单验证
Element-UI 提供了很多种表单验证的方式，包括必填、长度限制、正则表达式、自定义验证等。我们可以通过使用 Element-UI 的组件来实现这些验证功能，例如使用 Input 组件时，可以通过设置 prop 属性来进行验证。
必填验证
首先我们来介绍必填验证，这种验证方式是用来验证用户是否已经填写了必填项。对于 Element-UI 的 Input 组件，我们可以使用 prop 属性 required 来实现这种验证方式。
<el-form-item label="姓名" prop="name"> <el-input v-model="form.name" required></el-input> </el-form-item>
上面的代码中，我们使用了一个 form 对象来存储表单数据，使用了一个 Input 组件来接收用户输入，并将其绑定到 form.name 中。在 el-form-item 中，我们使用了 prop 属性来指定了该 Input 组件对应的表单项名称为 name，并设置了 required 属性来表示这是一个必填项。
使用以上代码，我们在输入框中未填写任何内容时，会发现输入框周围显示了红色的错误提示。
长度限制验证
接下来，我们来介绍长度限制验证，这种验证方式可以用来限制用户输入的字符长度。对于 Element-UI 的 Input 组件，我们可以使用 prop 属性 maxlength 和 minlength 来分别指定最大和最小输入长度。
<el-form-item label="昵称" prop="nickname"> <el-input v-model="form.nickname" :maxlength="10" :minlength="2"></el-input> </el-form-item>
上面代码中，我们使用了 maxlength 和 minlength 两个 prop 属性来限制用户输入的字符长度。在 maxlength 中，我们指定了最大长度为 10，在 minlength 中，我们指定了最小长度为 2。
当我们输入的字符串长度不符合限制条件时，Input 组件周围也会显示红色的错误提示。
正则表达式验证
使用正则表达式来验证用户输入也是一种常用的表单验证方式。Element-UI 的 Input 组件同样支持使用正则表达式来实现验证，我们可以通过设置 prop 属性 pattern 来指定正则表达式。
<el-form-item label="手机" prop="phone">
<el-input v-model="form.phone" :pattern="/^[1][3-9][0-9]{9}$/"></el-input>
</el-form-item>上面代码中，我们使用了 pattern 属性来指定了正则表达式 ^[1][3-9][0-9]{9}$，该表达式用来验证手机号码的合法性。
当我们输入的手机号码不符合正则表达式的要求时，Input 组件周围也会显示红色的错误提示。
自定义验证
以上三种验证方式是 Element-UI 提供的常见表单验证方式，但有些时候我们可能需要自定义一些验证规则。Element-UI 中同样也提供了自定义验证的方式，我们可以通过在表单项上绑定一个自定义函数来实现自定义验证。
<el-form-item label="邮箱" prop="email"> <el-input v-model="form.email" @blur="validateEmail"></el-input> </el-form-item>
上面代码中，我们在 Input 组件上绑定了一个 @blur 事件，并将其触发时执行自定义函数 validateEmail。下面是该函数的实现：
-- -------------------- ---- -------
-------- -
--------------- -
----- -------- - -----------------------------------------------------
------------------ -- -------------------------------- -
----------------------------------
------ ------
- ---- -
------ -----
-
--
--该函数使用了一个正则表达式来验证邮箱格式的合法性，如果输入的邮箱格式不正确，则会通过 this.$message.error 方法提示用户输入正确的邮箱格式，并返回 false。如果输入的邮箱格式正确，则返回 true。
通过上述方式，我们可以轻松地实现自定义的表单验证规则。
总结
本文介绍了如何使用 Element-UI 的表单验证方式，在 Vue.js 中实现常见的表单验证。通过必填验证、长度限制验证、正则表达式验证和自定义验证的介绍，相信读者对 Element-UI 的表单验证功能有了更深入的了解。在实际开发中，我们可以根据实际需求来选择合适的表单验证方式，提高用户输入数据的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c244648841e98948efbf5