下面以 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 錯誤和自定義提示信息
• 驗證通過后執行實際注冊邏輯