menber-center/pages/forget/forget.vue

<template>
	<view class="container">
		<u-form :model="forgetForm" ref="forgetForm" label-width="160"
			:label-style="{ color: '#000', fontSize: '30rpx'}">
			<u-form-item label="手机号" prop="shoujihao" :border-bottom="false">
				<u-input height="80" placeholder="请输入手机号"
				border-color="#d0d0d0" v-model="forgetForm.shoujihao"
					:border="true" class="form-item-input" type="number" />
			</u-form-item>
			<u-form-item label="验证码" prop="yanzhengma" :border-bottom="false">
				<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="forgetForm.yanzhengma"
					:border="true" class="form-item-input" />
			</u-form-item>
			<u-form-item label="新密码" prop="xinmima" :border-bottom="false">
				<u-input height="80" placeholder="请输入新密码" border-color="#d0d0d0" v-model="forgetForm.xinmima"
					:border="true" class="form-item-input" type="password" />
			</u-form-item>
			<view class="form-button" @click="submit">
				确认
			</view>
		</u-form>
	</view>
</template>

<script>
	import {
		msg
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				forgetForm: {
					shoujihao: '', //账号
					yanzhengma: "", //密码
					xinmima: '', // 确认密码
				},
				rules: {
					yanzhengma: [{
						required: true,
						message: '请输入账号',
						trigger: ['blur']
					}],
					xinmima: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					}],
					shoujihao: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['blur']
					}, {
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确的手机号',
						trigger: ['blur']
					}]
				}
			};
		},
		methods: {
			submit() {
				const that = this;
				that.$refs.forgetForm.validate((valid) => {
					console.log(valid, that.forgetForm.xingbie, 456);
					if (valid) {
						msg("数据验证成功")
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			}
		},
		onLoad() {},
		onReady() {
			this.$refs.forgetForm.setRules(this.rules);
		}
	}
</script>
<style lang="scss">
	.u-form-item {
		padding: 30rpx 0 !important;
	}
	.u-form-item .u-input--border{
		border-radius: 16rpx !important;
	}
	.u-form-item .u-form-item--left__content__label {
		display: block !important;
		text-align: justify;
		text-align-last: justify;
		padding: 0 20rpx 0 10rpx;
	}

	.u-input {
		background-color: #f7f7f7 !important;
	}
</style>
<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: #ffffff;
		padding: 0 40rpx;
	}

	.form-item-input {
		width: 100%;
	}

	.form-button {
		background: linear-gradient(90deg, #006af5, #21b0fc);
		border-radius: 20rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin: 50rpx 0;
	}

	.form-tip {
		text-align: center;
		color: #000000;
	}
</style>