el-form-item 邮箱格式验证
时间: 2025-06-30 22:17:44 浏览: 18
在使用 `el-form-item` 对邮箱输入进行格式验证时,可以通过正则表达式来确保用户输入的是合法的邮箱地址。Element Plus 提供了灵活的校验规则配置方式,允许通过 `validator` 或 `pattern` 来实现正则匹配。
下面是一个基于 Vue 3 和 Element Plus 的示例,展示了如何为邮箱字段添加正则校验:
```html
<template>
<el-form :model="form" :rules="rules" label-width="120px">
<el-form-item label="邮箱地址" prop="email">
<el-input v-model="form.email" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: ''
});
const validateEmail = (rule, value, callback) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
callback(new Error('请输入正确的邮箱地址'));
} else {
callback();
}
};
const rules = {
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ validator: validateEmail, trigger: 'blur' }
]
};
</script>
```
也可以直接使用 `pattern` 属性进行简单的正则匹配,而无需定义额外的 `validator` 函数:
```javascript
const rules = {
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '邮箱格式不正确', trigger: 'blur' }
]
};
```
上述代码中使用的正则表达式 `/^[^\s@]+@[^\s@]+\.[^\s@]+$/` 能够匹配大多数标准的电子邮件地址格式 [^2]。
---
阅读全文
相关推荐








<template> <el-form :inline="true" class="form"> <el-form-item label="学号"> <el-input v-model="studentId" placeholder="请输入学号" /> </el-form-item> <el-form-item label="姓名"> <el-input v-model="name" placeholder="请输入姓名" /> </el-form-item> <el-form-item label="年龄"> <el-input v-model.number="age" type="number" placeholder="请输入年龄" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="email" placeholder="请输入邮箱" /> </el-form-item> <el-form-item> <el-button type="primary" @click="addRoommate">添加</el-button> <el-button type="danger" @click="store.clearAll">清空</el-button> </el-form-item> </el-form> <el-table :data="list" style="width: 100%"> <el-table-column prop="studentId" label="学号" width="120" /> <el-table-column prop="name" label="姓名" width="150"> <template #default="scope"> {{ scope.row.name }} </template> </el-table-column> <el-table-column prop="age" label="年龄" width="100"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column label="操作" width="120"> <template #default="{ row }"> <el-button size="small" type="danger" @click="store.removeRoommate(row.studentId)">删除</el-button> </template> </el-table-column> </el-table> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; import { useRoommateStore } from '../store/roommates.js' import { storeToRefs } from 'pinia'; const router = useRouter(); const store = useRoommateStore() const {list} = storeToRefs(store); const studentId = ref(0) const name = ref('') const age = ref(18) const email = ref('') function goToUserDetail(userId) { router.push({ name: 'UserDetail', params: { studentId: userId } }); } const addRoommate = () => { store.addRoommate({ studentId: studentId.value, name: name.value, age: age.value, email: email.value }) } </script> <style scoped> /* Add custom styles here if needed */ </style>









