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

devtools/2024/11/20 20:53:22/

事例:

  

代码:

<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>


http://www.ppmy.cn/devtools/135579.html

相关文章

HTTP CRLF注入攻击

HTTP CRLF注入攻击 大家好&#xff0c;今天我们来聊聊一个与网络安全相关的重要话题——CRLF注入&#xff08;CRLF Injection&#xff09;。了解这种安全漏洞有助于我们更好地保护我们的应用程序和用户数据。 什么是CRLF&#xff1f; CRLF代表Carriage Return (回车) 和 Line…

Dubbo源码解析-服务导出(四)

一、服务导出 当我们在某个接口的实现类上加上DubboService后&#xff0c;就表示定义了一个Dubbo服务&#xff0c;应用启动时Dubbo只要扫描到了DubboService&#xff0c;就会解析对应的类&#xff0c;得到服务相关的配置信息&#xff0c;比如&#xff1a; 1. 服务的类型&…

Vue3 动态获取 assets 文件夹图片

我真服了Vue3 这个老六了,一个简单图片src 赋值搞得那么复杂. //item.type 是我遍历类型的类型参数 <img alt"吐槽大会" :src"getAssetUrl(item.type)" /> 基于 Vue2 的Webpack 处理,还不错,可以用/ 这种绝对路径,可以接受,虽然多了个require很不爽…

C++设计模式:工厂方法模式

工厂方法模式是一种创建型设计模式&#xff0c;其核心是将对象的创建延迟到子类中&#xff0c;通过定义一个接口来创建对象&#xff0c;使得子类决定实例化哪一个类。它在需要扩展产品类型时特别有用&#xff0c;能够避免代码的重复和耦合。 工厂方法模式的核心概念 抽象产品&…

【MYSQL】什么是关系型数据库与非关系型数据库?

真正的让你快速理解什么是关系型数据库与非关系型数据库~ 主要是以查询语句&#xff0c;存储结构&#xff0c;拓展 性上的区别。 关系型数据库&#xff08;最经典就是mysql&#xff0c;oracle&#xff09;&#xff1a;它是支持SQL语言&#xff0c;并且关系型数据库大部分都支持…

强化学习数学原理学习(四)

前言 今天是时序差分学习 正文 首先,明确一点,时序差分也是无模型的情况下的强化学习方法,TD学习是蒙特卡洛思想和动态编程&#xff08;DP&#xff09;思想的结合。最基础的时序差分学习估计状态值&#xff0c;而后续提出的Sarsa和Q-learning方法则直接对动作值进行估计。 …

在Linux上如何利用NTP使客户端和服务端的时间同步

对于服务端 一、先在服务端安装相关配置-----yum install chrony -y-----并启动 二、进入chrony的文件里----在第三行修改为阿里云时间服务地址 三、在服务端重启chrony 四、进行测试------chronyc sources -v 五、进入chrony的文件里添加客户端的ip地址---在第26行&#…

关于adb shell登录开发板后terminal显示不完整

现象 今天有个同事跟我说&#xff0c;adb shell 登录开发板后&#xff0c;终端显示不完整&#xff0c;超出边界后就会出现奇怪的问题&#xff0c;比如字符覆盖显示等。如下图所示。 正常情况下应该如下图所示&#xff1a; 很明显&#xff0c;第一张图的显示区域只有完整区域…