ygoa_miniapp/pages/mine/edit/edit.vue

<template>
	<view class="container">
		<!-- 手机号码输入框 -->
		<view class="input-group">
			<text>手机号码：</text>
			<input type="number" maxlength="11" v-model="userInfo.phone" placeholder="请输入手机号码" />
		</view>

		<!-- 邮箱输入框 -->
		<view class="input-group">
			<text>邮箱：</text>
			<input type="text" v-model="userInfo.email" placeholder="请输入邮箱地址" />
		</view>

		<!-- 用户生日输入框 -->
		<view class="input-group">
			<text>用户生日：</text>
			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday" @maskClick="maskClick" />
			</view>
		</view>
		
		<!-- 性别选择器 -->
		<view class="gender-selector">
			<radio-group @change="handleGenderChange">
				<text>性别：</text>
				<view class="genderLabel">
					<label>
						<radio value="male" :checked="userInfo.gender === 'male' " />男
					</label>
					<label>
						<radio value="female" :checked="userInfo.gender === 'female'" />女
					</label>
				</view>
			</radio-group>
		</view>

		<!-- 提交按钮 -->
		<view class="primaryBtn">
			<button type="primary" @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	// 定义用户信息的响应式对象
	const userInfo = reactive({
		phone: '13145672389',
		email: '',
		gender: 'male',
		birthday: '2000-01-10'
	});
	
	function handleGenderChange(event) {
		userInfo.gender = event.detail.value; // 更新性别
	};
	
	// 校验手机号码格式
	function validatePhone(phone) {
		const phoneRegex = /^1[3-9]\d{9}$/; // 手机号码格式正则（以1开头，11位数字）
		return phoneRegex.test(phone);
	}

	// 校验邮箱格式
	function validateEmail(email) {
		const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱格式正则
		return emailRegex.test(email);
	}

	// 处理提交事件
	function handleSubmit() {
		if (!validatePhone(userInfo.phone)) {
			uni.showToast({
				title: '手机号码格式不正确',
				icon: 'none'
			});
			return; // 终止提交
		}
		
		if (!validateEmail(userInfo.email)) {
			uni.showToast({
				title: '邮箱格式不正确',
				icon: 'none'
			});
			return; // 终止提交
		}

		uni.showToast({
			title: '提交成功',
			icon: 'none'
		});
	}

</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.input-group {
		margin-bottom: 10rpx;
	}

	.input-group input,
	.genderLabel {
		padding-left: 20rpx;
		margin: 20rpx auto;
		height: 70rpx;
	}

	.input-group input {
		border: 1rpx solid gainsboro; /* 修改边框样式 */
		background-color: white;
	}

	.input-group text {
		display: block;
		margin-bottom: 20rpx;
	}

	.gender-selector label {
		margin-right: 15rpx;
	}

	.primaryBtn {
		margin-top: 70rpx;
	}
</style>