el-form-item 邮箱格式验证vue2
时间: 2025-07-09 09:53:54 浏览: 8
在 Vue 2 中使用 `el-form-item` 对邮箱字段进行格式验证时,可以通过定义表单校验规则 `rules` 来实现。Element UI 提供了灵活的校验机制,支持通过正则表达式或自定义校验函数来确保用户输入的数据符合要求。
以下是一个完整的示例,展示如何在 Vue 2 中为邮箱字段添加格式验证:
```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>
export default {
data() {
const validateEmail = (rule, value, callback) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!value) {
callback(new Error('邮箱不能为空'));
} else if (!emailRegex.test(value)) {
callback(new Error('请输入正确的邮箱地址'));
} else {
callback();
}
};
return {
form: {
email: ''
},
rules: {
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ validator: validateEmail, trigger: 'blur' }
]
};
};
}
};
</script>
```
该代码中定义了一个自定义校验函数 `validateEmail`,它首先检查邮箱是否为空,然后使用正则表达式 `/^[^\s@]+@[^\s@]+\.[^\s@]+$/` 验证邮箱格式是否正确 [^2]。如果不符合条件,则返回对应的错误信息;否则表示校验通过。
也可以直接使用 `pattern` 属性进行简单的正则匹配:
```javascript
rules: {
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '邮箱格式不正确', trigger: 'blur' }
]
}
```
这种方式省去了额外定义 `validator` 函数的步骤,适用于不需要复杂逻辑的校验场景 [^1]。
---
阅读全文
相关推荐






<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>












