在
Element UI 的
el-
form 中添加
正则表达式校验可以通过使用
el-
form-item 的 prop 属性与
rules 属性来实现。具体步骤如下：
1. 首先，在
el-
form-item 中设置 prop 属性，该属性的值应该与表单数据对象中的属性名称相同。例如，如果表单数据对象中包含一个名为“email”的属性，则应将
el-
form-item 的 prop 属性设置为“email”。
2. 接下来，在
el-
form-item 中设置
rules 属性，该属性应该是一个数组，数组中的每个元素都是一个对象，该对象包含校验规则的相关信息，例如
正则表达式、错误提示信息等。例如，要对 email 字段进行校验，可以设置如下的
rules 属性：
```
<
el-
form-item lab
el="Email" prop="email">
<
el-input v-mod
el="
formData.email"></
el-input>
<
el-
form-item v-show="
formErrors.email" class="error">{{
formErrors.email }}</
el-
form-item>
<template slot="append">@example.com</template>
<template v-slot:prepend>
<i class="
el-icon-message"></i>
</template>
<template v-slot:lab
el>
<span>Email</span>
<
el-tooltip class="item" effect="dark" content="请
输入正确的邮箱地址" placement="top">
<i class="
el-icon-info"></i>
</
el-tooltip>
</template>
<template slot="error" slot-scope="{ msg }">
<span class="
el-
form-item__error">{{ msg }}</span>
</template>
<template v-slot:extra>
<div class="
el-
form-item__extra">请
输入您的常用邮箱，我们会向该邮箱发送激活邮件。</div>
</template>
<template slot="footer">
<
el-button type="primary" @click="handleSubmit('
form')">立即注册</
el-button>
<
el-button>取消</
el-button>
</template>
</
el-
form-item>
```
3. 在
rules 数组中，可以使用 validator 属性来设置校验函数，该函数接收三个参数：
rule、value 和 callback。其中，
rule 表示当前校验规则的相关信息，value 表示当前表单项的值，callback 是一个回调函数，它可以接收一个
字符串作为参数，表示校验失败时的错误提示信息。例如，要对 email 字段进行校验，可以使用如下的 validator 函数：
```
<
el-
form-item lab
el="Email" prop="email" :
rules="[
{ required: true, message: '请
输入您的邮箱地址' },
{ pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请
输入正确的邮箱地址', trigger: 'blur' }
]">
<
el-input v-mod
el="
formData.email"></
el-input>
</
el-
form-item>
```
这里通过 pattern 属性来设置
正则表达式，message 属性来设置错误提示信息，并通过 trigger 属性来设置触发校验的时机。如果校验失败，就会自动显示错误提示信息。
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
