uniapp小程序 表单校验踩过的坑

uniapp 表单检验 input 框输入是不会校验，尝试了各种方案，有的方案在切换登录方式时红色提示文本又没清理

废话不多，直接上代码

<template>
	<view class="login-phone">
		<view class="login-phone-content">
			<view class="tabs">
				<block v-for="(tab, index) in tabBars" :key="tab.id">
					<view :id="tab.id" :data-current="index" :class="tabIndex === index ? '' : 'active'" class="tab"
						@click="ontabtap(index)">
						<text class="name">{{ tab.name }}</text>
						<view class="line" :class="tabIndex === index ? 'active-line' : ''"></view>
					</view>
				</block>
			</view>
			<uni-forms ref="loginForm" :rules="loginRules" :modelValue="loginFormData">
				<view class="phone">
					<uni-forms-item style="height: 66rpx;" name="phone">
						<input maxlength="11" type="number" @input="phoneChange" placeholder-style="color:#aaa"
							class="phone-input" placeholder="请输入手机账号" v-model="loginFormData.phone" />
					</uni-forms-item>
					<view v-if="tabIndex === 0" class="vertifyBtn" @click="sendCode()" :disabled="!sending"
						:class="{'wait':!sending}">{{ content }}</view>
				</view>
				<uni-forms-item v-show="tabIndex === 0" name="code">
					<input @input="codeChange" maxlength="4" type="number" class="vertify-number"
						placeholder-style="color:#aaa" placeholder="请输入验证码" v-model="loginFormData.code" />
				</uni-forms-item>
				<uni-forms-item v-show="tabIndex === 1" name="password">
					<input @input="pwdChange" maxlength="12" class="vertify-number" placeholder-style="color:#aaa"
						type="password" placeholder="请输入密码" v-model="loginFormData.password" />
				</uni-forms-item>
			</uni-forms>
			<button class="loginBtn" @click="submit('loginForm')">登录</button>
			<button v-if="tabIndex === 0" class="wechatBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<image src="../../static/images/common/wechat.png" mode=""></image>
				<text>微信快速登录</text>
			</button>
		</view>
		<view class="serve">
			<text>
				服务热线
			</text>
			<text @click="makePhone('0755-86954658')" class="serve-number">
				0755-86954658
			</text>
		</view>
	</view>
</template>

<script>
	import {
		followAccountApi,
		login,
		sendAuthCode,
		quickLogin,
		passwordLogin,
	} from '@/api/login.js'
	export default {
		data() {
			return {
				timer: null,
				tabIndex: 0,
				tabBars: [{
						name: '验证码登录',
						id: 'code'
					},
					{
						name: '账号登录',
						id: 'account '
					}
				],
				sending: true,
				second: 60,
				content: '获取验证码',
				loginFormData: {
					phone: '',
					code: '',
					password: ""
				},
				loginRules: {
					validateTrigger: 'bind',
					phone: {
						rules: [{
								required: true,
								errorMessage: '账号不能为空'
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '账号长度为11位'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const telReg = /^1[3456789]\d{9}$/
									if (telReg.test(value)) {
										return true
									} else {
										callback('账号格式有误')
									}
								}
							}
						],
						validateTrigger: 'bind'
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}, {
							minLength: 4,
							maxLength: 4,
							errorMessage: '验证码长度为4位'
						}]
					},
					password: {
						rules: [{
							required: false,
							errorMessage: '密码不能为空'
						}, {
							minLength: 6,
							maxLength: 12,
							errorMessage: '密码长度为6-12位'
						}]
					},

				},
			}
		},
		methods: {
			ontabtap(index) {
				if (this.tabIndex === index) {
					return
				}
				this.tabIndex = index
				this.$set(this.loginFormData, 'phone', "")
				if (this.tabIndex === 0) {
					this.loginFormData.password = ''
					this.loginRules.password.rules[0].required = false
					this.loginRules.code.rules[0].required = true
				} else {
					this.loginRules.password.rules[0].required = true
					this.loginRules.code.rules[0].required = false
					this.loginFormData.code = ''
					this.second = 60
					this.content = '获取验证码'
					this.sending = true
					clearInterval(this.timer)
				}
				this.$refs.loginForm.resetForm()
			},
			makePhone(inputPhone) {
				uni.makePhoneCall({
					phoneNumber: inputPhone,
					success() {},
					fail() {
						uni.showToast({
							title: '电话调用失败',
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			phoneChange(e) {			
				this.$nextTick(() => {
					this.$refs.loginForm.validateField(['phone']).then((res) => {

					}).catch((err) => {

					})
				})

			},
			codeChange(e) {
				this.$nextTick(() => {
					this.$refs.loginForm.validateField(['code']).then((res) => {

					}).catch((err) => {

					})
				})
			},
			pwdChange(e) {
				this.$nextTick(() => {
					this.$refs.loginForm.validateField(['password']).then((res) => {

					}).catch((err) => {

					})
				})
			},			 
			loginSuccessHandler(data) {
				const roleType = (data.roleType).toString()
				this.$store.commit('user/setToken', 'Bearer ' + data.token)
				this.$store.commit('user/setRoleType', roleType)
				followAccountApi().then(accountResult => {
					const { isSubscribe } = accountResult.data.data;
					if (isSubscribe === "true") {										 
						uni.switchTab({
							url: "../tabBar/index"
						})
					} else {
						uni.navigateTo({
							url: './official-account'
						})
					}
				});
			},
			submit(ref) {				 
				this.$refs[ref].validate().then(() => {
					if (this.tabIndex === 0) {
						login({
							openid: this.$store.state.user.openId,
							username: this.loginFormData.phone,
							vcode: this.loginFormData.code
						})
						.then((result) => {
							const data = result.data.data;
							this.loginSuccessHandler(data);
						});
						return;
					}
					passwordLogin({
						username: this.loginFormData.phone,
						password: this.loginFormData.password
					})
					.then((result) => {
						const data = result.data.data;
						this.loginSuccessHandler(data);
					});
				})
			},
			sendCode() {
				const reg_tel = /^1[3456789]\d{9}$/
				if (reg_tel.test(this.loginFormData.phone)) {
					this.content = this.second + '秒后重发'
					this.sending = false
					let timer = setInterval(() => {
						this.second--
						this.content = this.second + '秒后重发'
						if (this.second < 0) {
							clearInterval(timer)
							this.second = 60
							this.content = '获取验证码'
							this.sending = true
						}
					}, 1000)
					sendAuthCode({ phone: this.loginFormData.phone })
				} else {
					uni.showToast({
						title: '请正确填写您的手机号',
						duration: 3000,
						icon: 'none'
					})
				}
			},
			getPhoneNumber: function(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					// 用户点击接受后 你会拿到和之前获取基本信息一样的iv 和en 几个参数 传递给后端，
					// 后端调取微信官方的接口并且进行解密 再回传手机号到前台
					quickLogin({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						openid: this.$store.state.user.openId
					})
					.then((res) => {
						const data = res.data.data;
						const _token = 'Bearer ' + data.token;
						const roleType = (data.roleType).toString();
						this.$store.commit('user/setToken', _token)
						this.$store.commit('user/setRoleType', roleType)
						// 判断有无关注公众号
						followAccountApi().then(accountResponse => {
							const { isSubscribe } = accountResponse.data.data;
							if(isSubscribe === "true") {										 
								uni.switchTab({
									url: "../tabBar/index"
								})
							} else {
								uni.navigateTo({
									url: './official-account'
								})
							}
						})
					})
				}
			},
			// 临时用
			temLogin() {
				uni.navigateTo({
					url: './official-account'
				})
			}
			// 临时用
		}
	}
</script>

<style scoped lang="scss">
	button::after {
		border: none
	}

	.login-phone {
		padding: 0 42rpx;
	}

	.login-phone-content {
		margin-top: 96rpx;
	}

	.tabs {
		position: relative;
		display: flex;
		justify-content: flex-start;
		overflow: hidden;

		.tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			 230rpx;
			text-align: center;
			height: 94rpx;
			font-weight: bold;
			font-size: 46rpx;

			&.active {
				color: #666;
				font-weight: 500;
			}

			.name {
				padding-top: 15rpx;
				padding-bottom: 10rpx;
			}

			.line {
				display: inline-block;
				 118rpx;
				height: 6rpx;
				border-radius: 6rpx;
				background-color: transparent;

				&.active-line {
					background-color: #5984fe;
				}
			}
		}

		.tab+.tab {
			margin-left: 80rpx;
		}
	}

	.phone {
		margin-top: 101rpx;
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		padding: 36rpx 0rpx 0rpx;

		.phone-input {
			flex: 1;
			font-size: 17px;
			line-height: 24px;
		}

		.vertifyBtn {
			text-align: right;
			 380rpx;
			font-size: 34rpx;
			line-height: 48rpx;
			color: #5984FE;
		}
	}

	.vertify-number {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		font-size: 17px;
		line-height: 24px;
		padding-top: 18px;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.loginBtn {
		margin-top: 88rpx;
		 666rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		color: #fff;
		height: 94rpx;
		line-height: 94rpx;
		font-size: 34rpx;
		text-align: center;
		background: #5982F9;
	}

	.wechatBtn {
		margin-top: 32rpx;
		 666rpx;
		height: 94rpx;
		background: #55BC68;
		color: white;
		font-size: 34rpx;
		text-align: center;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			 72rpx;
			height: 72rpx;
		}
	}

	.serve {
		 666rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		font-size: 28rpx;
		line-height: 20px;
		color: #333333;
		position: absolute;
		bottom: 150rpx;

		.serve-number {
			margin-left: 24rpx;
			color: #5982F9;
			border-bottom: 1rpx solid #5982F9;
		}
	}

	.wait {
		color: #AAAAAA !important;
	}
</style>