修改bug

property-uniapp-project/pageSubPack/loginSub/register-new-user.vue

@@ -1,11 +1,6 @@
 <template>
 		<view class="register-page">
 			<view class="status_bar"></view>
-			<!-- 顶部导航 -->
-			<!-- <view class="nav-bar">
-				<uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
-				<view class="nav-title">注册</view>
-			</view> -->
 
 			<!-- 注册标题 -->
 			<view class="register-title">注册用户</view>
@@ -18,7 +13,6 @@
 				</view>
 				<uni-easyinput class="input-content" type="number" v-model="phoneNumber" @input="phoneNumber = phoneNumber.replace(/\D/g, '')" placeholder="请输入手机号"
 					:inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle" />
-			
 			</view>
 
 			<!-- 验证码输入 + 获取验证码按钮 -->
@@ -26,11 +20,9 @@
 				<view class="input-icon">
 					<image src="https://wuyeadmin.bugtc.com/images/login/code.png" mode="" style="height: 100%;width: 100%;">
 					</image>
-					<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
 				</view>
 				<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" @input="verifyCode = verifyCode.replace(/\D/g, '')" placeholder="请输入验证码"
 					:inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle" />
-				
 
 				<button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode">
 					{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
@@ -38,46 +30,43 @@
 			</view>
 
 			<!-- 账号输入框 -->
-			<view class="input-item">
-				<view class="input-icon">
-					<image src="https://wuyeadmin.bugtc.com/images/login/account.png" mode=""
-						style="height: 100%;width: 100%;"></image>
-					<!-- <uni-icons type="person" size="24" color="#999"></uni-icons> -->
+			<view class="input-item-wrap">
+				<view class="input-item">
+					<view class="input-icon">
+						<image src="https://wuyeadmin.bugtc.com/images/login/account.png" mode=""
+							style="height: 100%;width: 100%;"></image>
+					</view>
+					<uni-easyinput class="input-content" type="text" v-model="account" @blur="validateAccount" @focus="clearAccountError" placeholder="请输入账号（4-20位）" :inputBorder="false"
+						maxlength="20" :placeholderStyle="placeholderStyle" />
 				</view>
-				<uni-easyinput class="input-content" type="text" v-model="account" placeholder="请输入账号（4-20位）" :inputBorder="false"
-					maxlength="20"  :placeholderStyle="placeholderStyle" />
-			
-
+				<text class="input-error" v-if="accountError">{{ accountError }}</text>
 			</view>
 
 			<!-- 密码输入框 -->
-			<view class="input-item">
-				<view class="input-icon">
-					<image src="https://wuyeadmin.bugtc.com/images/login/password.png" mode=""
-						style="height: 100%;width: 100%;"></image>
-					<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
+			<view class="input-item-wrap">
+				<view class="input-item">
+					<view class="input-icon">
+						<image src="https://wuyeadmin.bugtc.com/images/login/password.png" mode=""
+							style="height: 100%;width: 100%;"></image>
+					</view>
+					<uni-easyinput class="input-content" type="password" v-model="password" @input="password = password.replace(/\s/g, '')" @blur="validatePassword" @focus="clearPasswordError" placeholder="请输入密码（6-16位）"
+						:inputBorder="false" maxlength="16" :placeholderStyle="placeholderStyle" />
 				</view>
-				<uni-easyinput class="input-content" type="password" v-model="password" placeholder="请输入密码（6-16位）"
-					:inputBorder="false" maxlength="16" :placeholderStyle="placeholderStyle" />
-				
-
+				<text class="input-error" v-if="passwordError">{{ passwordError }}</text>
 			</view>
+
 			<!-- 协议勾选 -->
 			<view class="agreement-item">
 				<view @click="toggleAgreement">
 					<uni-icons type="checkbox-filled" size="24" color="#007aff" v-if="agreeAgreement"></uni-icons>
 					<uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons>
 				</view>
-			<!-- 	<text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意<text
-						class="agreePrivacy">《用户隐私政策》</text></text> -->
-				
 				<text class="agreement-text" >我已阅读并同意
 					<text class="agreePrivacy" @click.stop="goToUserAgreement">《用户协议》</text>和
 					<text class="agreePrivacy" @click.stop="goToPrivacy">《隐私政策》</text>
 				</text>
 			</view>
 
-
 			<!-- 立即注册按钮 -->
 			<button class="register-btn" @click="handleRegister">
 				立即注册
@@ -106,34 +95,30 @@
 		import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue'
 
 		// ========== 响应式数据 ==========
-		// 表单数据
 		const phoneNumber = ref('');
 		const verifyCode = ref('');
 		const account = ref('');
+		const accountError = ref('');
 		const password = ref('');
+		const passwordError = ref('');
 		const placeholderStyle = ref('font-size:24rpx')
-		// 协议勾选
 		const agreeAgreement = ref(false);
-		// 隐私弹窗
 		const showPrivacyPopup = ref(false)
 		const pendingAction = ref('')
-		// 验证码倒计时
 		const countDown = ref(0);
 		let timer = null;
 
 		// ========== 计算属性 ==========
-		// 是否可获取验证码（手机号格式正确）
 		const canGetVerify = computed(() => {
 			const phoneReg = /^1[3-9]\d{9}$/;
 			return phoneReg.test(phoneNumber.value);
 		});
 
-		// 是否可注册（所有表单项+协议都满足）
 		const canRegister = computed(() => {
-			const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
-			const verifyReg = /^\d{6}$/; // 验证码6位
-			const accountReg = /^.{4,20}$/; // 账号4-20位
-			const pwdReg = /^.{6,16}$/; // 密码6-16位
+			const phoneReg = /^1[3-9]\d{9}$/;
+			const verifyReg = /^\d{6}$/;
+			const accountReg = /^.{4,20}$/;
+			const pwdReg = /^.{6,16}$/;
 
 			return phoneReg.test(phoneNumber.value) &&
 				verifyReg.test(verifyCode.value) &&
@@ -143,16 +128,50 @@
 		});
 
 		// ========== 方法 ==========
-		// 返回上一页
 		const goBack = () => {
 			uni.navigateBack();
 		};
 
-		// 切换协议勾选状态
 		const toggleAgreement = () => {
 			agreeAgreement.value = !agreeAgreement.value;
 		};
-		// 打开用户协议
+
+		// 账号失焦校验
+		const validateAccount = () => {
+			const val = account.value
+			if (!val) { accountError.value = ''; return }
+			if (/\s/.test(val)) {
+				accountError.value = '账号不能包含空格'
+			} else if (val.length < 4 || val.length > 20) {
+				accountError.value = '账号需 4-20 位'
+			} else {
+				accountError.value = ''
+			}
+		};
+
+		// 账号聚焦清除错误提示
+		const clearAccountError = () => {
+			accountError.value = ''
+		};
+
+		// 密码失焦校验
+		const validatePassword = () => {
+			const val = password.value
+			if (!val) { passwordError.value = ''; return }
+			if (val.length < 6 || val.length > 16) {
+				passwordError.value = '密码需 6-16 位'
+			} else if (/\s/.test(val)) {
+				passwordError.value = '密码不能包含空格'
+			} else {
+				passwordError.value = ''
+			}
+		};
+
+		// 密码聚焦清除错误提示
+		const clearPasswordError = () => {
+			passwordError.value = ''
+		};
+
 		const goToUserAgreement = () => {
 		  // #ifdef APP-PLUS
 		  plus.runtime.openURL('https://wuye.ckdzkj.com/parivw/ownler_xieyi.html')
@@ -161,8 +180,7 @@
 		  window.open('https://wuye.ckdzkj.com/parivw/ownler_xieyi.html')
 		  // #endif
 		}
-		
-		// 打开隐私政策
+
 		const goToPrivacy = () => {
 		  // #ifdef APP-PLUS
 		  plus.runtime.openURL('https://wuye.ckdzkj.com/parivw/owner.html')
@@ -171,17 +189,14 @@
 		  window.open('https://wuye.ckdzkj.com/parivw/owner.html')
 		  // #endif
 		}
-	
-		// 检查表单状态（实时更新按钮状态）
+
 		const checkForm = () => {};
 
-		// 打开隐私弹窗
 		const openPrivacyPopup = (action) => {
 			pendingAction.value = action || ''
 			showPrivacyPopup.value = true
 		}
 
-		// 同意隐私协议
 		const agreePrivacy = () => {
 			showPrivacyPopup.value = false
 			agreeAgreement.value = true
@@ -191,13 +206,11 @@
 			pendingAction.value = ''
 		}
 
-		// 不同意隐私协议
 		const disagreePrivacy = () => {
 			showPrivacyPopup.value = false
 			pendingAction.value = ''
 		}
 
-
 		// 获取验证码
 		const getVerifyCode = () => {
 			if (!canGetVerify.value) return;
@@ -211,7 +224,6 @@
 						title: '验证码已发送',
 						icon: 'success'
 					});
-					// 开始60秒倒计时
 					countDown.value = 60;
 					timer = setInterval(() => {
 						countDown.value--;
@@ -220,7 +232,6 @@
 							timer = null;
 						}
 					}, 1000);
-
 				} else {
 					uni.showToast({
 						title: '验证码发送失败',
@@ -233,8 +244,6 @@
 					icon: 'none'
 				});
 			})
-
-
 		};
 
 		// 处理注册逻辑
@@ -263,6 +272,10 @@
 				uni.showToast({ title: '账号长度需为 4-20 位', icon: 'none' });
 				return;
 			}
+			if (/\s/.test(account.value)) {
+				uni.showToast({ title: '账号格式不对，不允许注册', icon: 'none' });
+				return;
+			}
 			if (!password.value) {
 				uni.showToast({ title: '请输入密码', icon: 'none' });
 				return;
@@ -275,6 +288,10 @@
 				uni.showToast({ title: '密码不能超过 16 位', icon: 'none' });
 				return;
 			}
+			if (/\s/.test(password.value)) {
+				uni.showToast({ title: '密码格式不对，不允许注册', icon: 'none' });
+				return;
+			}
 			if (!agreeAgreement.value) {
 				openPrivacyPopup('register')
 				return;
@@ -305,7 +322,6 @@
 							url: '/pageSubPack/loginSub/login?mode=pwd'
 						});
 					}, 1500);
-
 				} else {
 					uni.showToast({
 						title: '注册失败',
@@ -322,7 +338,6 @@
 		};
 
 		// ========== 生命周期 ==========
-		// 页面卸载时清除定时器
 		onUnmounted(() => {
 			if (timer) {
 				clearInterval(timer);
@@ -334,7 +349,6 @@
 		/* 页面容器 */
 		.register-page {
 			padding: 20rpx 40rpx 40rpx;
-			/* background-color: #f8f9fa; */
 			height: 100vh;
 			overflow: hidden;
 			box-sizing: border-box;
@@ -346,11 +360,9 @@
 			width: 100%;
 		}
 
-		/* 顶部导航栏 */
 		.nav-bar {
 			display: flex;
 			align-items: center;
-			/* height: 88rpx; */
 			margin-bottom: 70rpx;
 		}
 
@@ -363,7 +375,6 @@
 			margin-right: 100rpx;
 		}
 
-		/* 注册标题 */
 		.register-title {
 			font-size: 40rpx;
 			font-weight: 600;
@@ -371,6 +382,15 @@
 			margin-bottom: 60rpx;
 		}
 
+		/* 输入框外层包装（用于承载错误提示） */
+		.input-item-wrap {
+			margin-bottom: 30rpx;
+		}
+
+		.input-item-wrap .input-item {
+			margin-bottom: 0;
+		}
+
 		/* 输入框通用样式 */
 		.input-item {
 			display: flex;
@@ -405,7 +425,7 @@
 			height: 100%;
 		}
 
-		/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
+		/* 深度覆盖 uni-easyinput 内部默认样式 */
 		.input-content :deep(.uni-easyinput__content) {
 			height: 100% !important;
 			min-height: unset !important;
@@ -424,6 +444,14 @@
 			padding-right: 20rpx;
 		}
 
+		/* 输入框错误提示（在输入框下方） */
+		.input-error {
+			color: #e74c3c;
+			font-size: 22rpx;
+			line-height: 1.4;
+			padding: 10rpx 30rpx 0;
+		}
+
 		/* 获取验证码按钮 */
 		.get-verify-btn {
 			position: absolute;