uniapp 设置form表单以及验证密码

事例：

代码：

<template>
	<view class="changePwd">
		<view class="login_form">
			<view class="title">
				<view>
					修改密码
				</view>
				<view>
					您好，请在下方输入原密码和新密码进行更改密码
				</view>
			</view>
			<uni-forms :modelValue="form" ref="loginForm" :rules="rules">
				<uni-forms-item name="oldPassword">
					<view class="itemContent">
						<text class="itemTextStyle">原密码：</text>
						<input class="itemInputStyle" type="text" v-model="form.oldPassword" placeholder="请输入内容" />
					</view>
					<!--分割线-->
					<view style="height: 1px; background-color: #ccc;"></view>
				</uni-forms-item>
				
				<uni-forms-item name="newPassword">
				<view class="itemContent">
					<text class="itemTextStyle">新密码：</text>
					<input class="itemInputStyle" type="text" v-model="form.newPassword" placeholder="请输入内容" />
				</view>
				<!--分割线-->
				<view style="height: 1px; background-color: #ccc;"></view>
				</uni-forms-item>
				
				<uni-forms-item name="confirmPassword">
				<view class="itemContent">
					<text class="itemTextStyle">确认密码：</text>
					<input class="itemInputStyle" type="text" v-model="form.confirmPassword" placeholder="请输入内容" />
				</view>
				<!--分割线-->
				<view style="height: 1px; background-color: #ccc;"></view>
				</uni-forms-item>
				
				<view class="updateBtn">
					<button class="button" @click="updateForm">修改密码</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>
<script>
import {updatePassword} from '@/api/api.js';

	export default {
		name:"changePassword",
		data(){
			return{
				form:{
					oldPassword:'',
					newPassword:'',
					confirmPassword:''
				},
				rules:{
					// 旧密码规则限制
					oldPassword: {
						rules: [
							{required: true,errorMessage: '请输入原密码', trigger: 'blur'},
							{minLength: 1,maxLength: 11, errorMessage: '密码长度为1~11位', trigger: 'change'}
						]
					},
					// 新密码规则限制
					newPassword: {
						rules: [
							{required: true,errorMessage: '请输入新密码', trigger: 'blur'},
							{minLength: 1,maxLength: 11, errorMessage: '密码长度为1~11位', trigger: 'change'}
						]
					},
					// 确认密码规则限制
					confirmPassword: {
						rules: [
							{required: true,errorMessage: '确认密码不能为空'},
							{
								validateFunction: (rule, value, data) => data.newPassword === value,
								errorMessage: '两次输入的密码不一致'
							}
						]
					},
				},
			}
		},
		methods:{
			updateForm(){
				// 验证
				this.$refs.loginForm.validate().then(res=>{
					//console.log("res",res);			
				}).catch(err=>{
					console.log('表单数据错误信息：', err);
					/* uni.showToast({
						title:'登录失败',
						icon:'error',
					}) */
				});
				
				this.jumpPage(this.form);
			},
			async jumpPage(data){// 跳转页面
				
				const res = await updatePassword(data);
				if(res.success){
					uni.navigateBack({
					  url: '/pages/my/my'
					});
				}else{
					uni.showToast({
						title: "修改失败",
						icon: "error"
					}) 
				}
			
				
				
			},
		}
	}
	
	
</script>
<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}
	
	.custom-font {
	    font-size: 16px; /* 设置字体大小 */
	    font-weight: bold; /* 设置字体粗细 */
	    color: black; /* 设置字体颜色 */
		align-items: center;
	    /* 可以继续添加其他字体样式 */
	  }

	.changePwd {
		overflow: hidden;
	}
	
	.login_form {
		/* background-color: rgba(0, 0, 0, 0.4); */
		border-radius: 5rpx;
		padding: 10rpx;
		margin: 3vw 20rpx;
	}

	.title view:nth-child(1) {
		font-size: 60rpx;
		margin-bottom: 8rpx;
	}
	
	.title view:nth-child(2) {
		font-size: 20rpx;
		margin-bottom: 30rpx;
		color: #b1b1b1;
	}

	.itemContent{
		display: flex;
		background-color: #ffffff;
		padding: 2vw 2vw;
		padding-top: 10rpx;
		box-sizing: border-box;
		align-items: center;
		.itemTextStyle{
			width: 90rpx;
			font-size: 16rpx;
			text-align: center;
		}
		.itemInputStyle{
			width: 90%;
		}
	}
	
	.updateBtn {
		margin-top: 140rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		
		button {
			background-color: #66CD00;
			color: white;
		}
		
	}

	

</style>