uniapp使用form组件定义一个修改密码的页面

new出一个对象

于 2024-06-17 10:37:52 发布

阅读量344

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_52830464/article/details/139737391

版权

使用uview-plus组件库参考文档：

Form 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

以下代码兼容H5、安卓App、微信小程序

页面代码

<template>
	<view class="passwordSet">
		<view class="form-wrap">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="100">
				<u-form-item prop="old_password" label="旧密码" :borderBottom="true">
					<u--input type="password" maxlength="18" v-model="form.old_password" border="none"
						placeholder="输入旧密码">
					</u--input>
				</u-form-item>
				<u-form-item prop="new_password" label="新密码" :borderBottom="true">
					<u--input type="password" maxlength="18" v-model="form.new_password" border="none"
						placeholder="输入新密码">
					</u--input>
				</u-form-item>
				<u-form-item prop="re_password" label="确认密码" :borderBottom="true">
					<u--input type="password" maxlength="18" v-model="form.re_password" border="none"
						placeholder="输入确认密码">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="text">（密码规则:8-18位,数字和字母组合）</view>
		<view class="saveBtn" @click="SubmitSave">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			const validateConfirmPassword = (rule, value, callback) => {
				if (this.form.new_password !== value) {
					callback(new Error("确认密码与新密码不一致"))
				} else {
					callback()
				}
			}
			return {
				form: {
					old_password: '',
					new_password: '',
					re_password: '',
				},
				rules: {
					old_password: [{
						required: true,
						message: "旧密码不能为空",
						trigger: ['blur', 'change']
					}],
					new_password: [{
						required: true,
						message: "新密码不能为空",
						trigger: ['blur', 'change']
					}, ],
					re_password: [{
							required: true,
							message: "确认密码不能为空",
							trigger: ['blur', 'change']
						},
						{
							validator: validateConfirmPassword,
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		onLoad() {},
		mounted() {
			this.$refs.formRef.setRules(this.rules)
		},
		methods: {
			//保存
			SubmitSave() {
				this.$refs.formRef.validate().then(valid => {
					if (valid) {
						let params = {
							old_password: this.form.old_password,
							new_password: this.form.new_password,
							re_password: this.form.re_password,
						}
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.passwordSet {
		.form-wrap {
			border-top: 1px solid #eee;


			::v-deep .u-form-item__body {
				padding: 25rpx !important;
			}

			::v-deep .u-form-item__body__right__message {
				margin-left: 115px !important;
			}

		}

		.text {
			padding: 20rpx;
			color: #666;
		}

		.saveBtn {
			height: 70rpx;
			line-height: 70rpx;
			width: 350rpx;
			background-color: #ff6a00;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>

效果图