正则表达式使用示例

下面以 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和setter
        public 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和setter
        public 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 错误和自定义提示信息
• 验证通过后执行实际注册逻辑