下面以 Vue（前端）和 Spring Boot（后端）为例，展示正则表达式在前后端交互中的应用，以邮箱格式验证为场景：

1.前端

<template><div class="register-container"><h3>用户注册</h3><form @submit.prevent="handleSubmit"><div class="form-group"><label>邮箱：</label><input type="text" v-model="email" @input="validateEmail"placeholder="请输入邮箱"><p class="error-message" v-if="!isEmailValid && email.length > 0">请输入有效的邮箱格式（如：example@domain.com）</p></div><button type="submit" :disabled="!isEmailValid">注册</button></form></div>
</template><script setup>
import { ref, computed } from 'vue';
import axios from 'axios';// 响应式数据
const email = ref('');// 邮箱正则表达式（与后端保持一致）
const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;// 验证状态
const isEmailValid = computed(() => {return emailReg.test(email.value);
});// 实时验证（可选，也可依赖computed自动响应）
const validateEmail = () => {// 可在这里添加更复杂的验证逻辑
};// 提交表单
const handleSubmit = async () => {try {const response = await axios.post('/api/register', { email: email.value });alert(response.data.message);} catch (error) {alert(error.response?.data?.message || '注册失败');}
};
</script><style scoped>
.register-container {max-width: 400px;margin: 20px auto;padding: 20px;border: 1px solid #ddd;border-radius: 4px;
}.form-group {margin-bottom: 15px;
}input {width: 100%;padding: 8px;margin-top: 5px;border: 1px solid #ddd;border-radius: 4px;
}.error-message {color: #ff4444;font-size: 12px;margin: 5px 0 0 0;
}button {padding: 8px 16px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:disabled {background-color: #cccccc;cursor: not-allowed;
}
</style>

2.后端

import org.springframework.http.ResponseEntity;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import jakarta.validation.Valid;
import jakarta.validation.constraints.Pattern;@RestController
@RequestMapping("/api")
@Validated // 开启方法参数验证
public class UserController {// 邮箱正则表达式（与前端保持一致）private static final String EMAIL_REGEX = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$";@PostMapping("/register")public ResponseEntity<Result> register(@Valid @RequestBody RegisterRequest request) {// 验证通过：执行注册逻辑（如存入数据库）return ResponseEntity.ok(new Result(true, "邮箱 " + request.getEmail() + " 格式验证通过，注册成功！"));}// 请求参数封装类public static class RegisterRequest {@Pattern(regexp = EMAIL_REGEX,message = "邮箱格式无效，请重新输入")private String email;// getter和setterpublic String getEmail() {return email;}public void setEmail(String email) {this.email = email;}}// 响应结果封装类public static class Result {private boolean success;private String message;public Result(boolean success, String message) {this.success = success;this.message = message;}// getter和setterpublic boolean isSuccess() {return success;}public void setSuccess(boolean success) {this.success = success;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}}
}

3.小结

前端验证逻辑：

• 使用 Vue 的响应式数据email绑定输入框
• 通过计算属性isEmailValid实时判断格式是否正确
• 提交按钮状态随验证结果动态禁用 / 启用
• 用 Axios 发送 POST 请求到后端接口

后端验证逻辑：

• 使用@Pattern注解在RegisterRequest类中定义邮箱正则规则
• 添加@Valid注解触发参数验证
• 验证失败时，Spring 会自动返回 400 错误和自定义提示信息
• 验证通过后执行实际注册逻辑