当前位置：首页 > news >正文

uniapp开发动态添加密码验证

news 2025/8/15 15:22:21

在密码框里面添加验证当输入框输入时分别验证要满足至少8个字符，至少1个数字，至少1个字母，三种条件，不满足就亮起相应的图标图标也有三种状态（默认状态，成功状态失败状态）

代码如下

<template><view class="cuotent"><!-- 顶部区域 --><view class="top"></view><!-- 中间部分 --><view><!-- 名称 --><view class="name"><view class="title">设置登录密码</view><view class="txt">安全从这里开始，请输入密码</view></view><!-- 表单区域 --><view class="form"><view class="item"><view class="title">密码</view><input class="uni-input" v-model="pasword" :type="showPassword ? 'text' : 'password'"  placeholder-class="iput_text" placeholder="请输入密码" /><uni-icons class="yesicon" :type="showPassword ? 'eye' : 'eye-slash'" size="36rpx" color="#737373" @click="changePassword(1)"></uni-icons><uni-icons class="closeicon" v-if="pasword && pasword.length > 0" type="close" size="36rpx" color="#737373" @click="clearPassword(1)"></uni-icons></view><view class="item"><view class="title">确认密码</view><input class="uni-input" v-model="isPasword" :type="showIsPassword ? 'text' : 'password'"  placeholder-class="iput_text" placeholder="请输入密码" /><uni-icons class="yesicon" :type="showIsPassword ? 'eye' : 'eye-slash'" size="36rpx" color="#737373" @click="changePassword(2)"></uni-icons><uni-icons class="closeicon" v-if="isPasword && isPasword.length > 0" type="close" size="36rpx" color="#737373" @click="clearPassword(2)"></uni-icons></view><view class="xieyi"><view class="requirement"><uni-icons :type="getIconType('length')" :color="getIconColor('length')" size="32rpx"></uni-icons><text class="label">至少8个字符</text></view><view class="requirement"><uni-icons :type="getIconType('number')" :color="getIconColor('number')" size="32rpx"></uni-icons><text class="label">至少1个数字</text></view><view class="requirement"><uni-icons :type="getIconType('letter')" :color="getIconColor('letter')" size="32rpx"></uni-icons><text class="label">至少1个字母</text></view></view></view><view class="bottom_are"><view class="btn" @click="sure">确定</view></view></view></view>
</template><script setup>
import { reactive, ref, computed  } from 'vue';
let showPassword = ref(false)
let showIsPassword = ref(false)
let pasword = ref('')
let isPasword = ref('')// 密码验证条件
const hasMinLength = computed(() => pasword.value.length >= 8)
const hasNumber = computed(() => /\d/.test(pasword.value))
const hasLetter = computed(() => /[a-zA-Z]/.test(pasword.value))
// 获取图标类型
const getIconType = (type) => {if (!pasword.value || pasword.value.length === 0) {// 默认状态return 'checkbox-filled'}switch (type) {case 'length':return hasMinLength.value ? 'checkbox-filled' : 'info-filled'case 'number':return hasNumber.value ? 'checkbox-filled' : 'info-filled'case 'letter':return hasLetter.value ? 'checkbox-filled' : 'info-filled'default:return 'info-filled'}
}// 获取图标颜色
const getIconColor = (type) => {if (!pasword.value || pasword.value.length === 0) {// 默认状态 - 灰色return '#d4d4d4'}switch (type) {case 'length':return hasMinLength.value ? '#12a58c' : '#d83d17'case 'number':return hasNumber.value ? '#12a58c' : '#d83d17'case 'letter':return hasLetter.value ? '#12a58c' : '#d83d17'default:return '#d4d4d4'}
}
const changePassword = (val)=> {if(val == 1) {showPassword.value = !showPassword.value;} else {showIsPassword.value = !showIsPassword.value;}console.log('rrr',showPassword.value);
}
// 清除密码的方法
const clearPassword = (val) => {if(val == 1) {pasword.value = "";} else {isPasword.value = "";}
}
const sure = ()=> {console.log('跳转注册成功页面');uni.navigateTo({url: '/pages/registeredsuccess/registeredsuccess'})
}</script><style lang="scss" scoped>.cuotent {width: 100%;height: 1100rpx;overflow: hidden;position: relative;.name {display: flex;flex-direction: column;align-items: center;width: 100%;margin-top: 112rpx;margin-bottom: 80rpx;.title {width: 384rpx;height: 64rpx;font-family: Inter, Inter;font-weight: 600;font-size: 64rpx;color: #171717;line-height: 64rpx;text-align: left;font-style: normal;text-transform: none;}.txt {height: 40rpx;font-family: Inter, Inter;font-weight: 400;font-size: 26rpx;color: #898989;line-height: 39rpx;font-style: normal;text-transform: none;margin-top: 16rpx;}}.form {width: 100%;box-sizing: border-box;padding: 0 40rpx;margin-bottom: 164rpx;.item {margin-bottom: 32rpx;position: relative;.title {height: 56rpx;font-family: PingFang SC, PingFang SC;font-size: 24rpx;color: #737373;line-height: 24rpx;font-style: normal;text-transform: none;display: flex;align-items: center;margin-bottom: 8rpx;}.iput_text {font-family: Inter, Inter;font-weight: 400;font-size: 28rpx;color: #A3A3A3;}.uni-input {height: 96rpx;background: #FAFAFA;border-radius: 24rpx 24rpx 24rpx 24rpx;border: 1rpx solid #898989;padding-left: 32rpx;padding-right: 64rpx;}.yesicon {position: absolute;right: 32rpx;top: 100rpx;}.closeicon {position: absolute;right: 90rpx;top: 100rpx; }}.xieyi {display: flex;flex-direction: column;.requirement {margin-bottom: 20rpx;height: 24rpx;font-family: Inter, Inter;font-weight: 400;font-size: 24rpx;color: #898989;text-align: left;font-style: normal;text-transform: none;position: relative;display: flex;align-items: center;.uni-icons {margin-right: 6rpx;}}}}.bottom_are {width: 100%;display: flex;justify-content: center;.btn {width: 670rpx;height: 104rpx;background: #FF4001;border-radius: 24rpx 24rpx 24rpx 24rpx;font-family: Inter, Inter;font-weight: normal;font-size: 32rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;}}}    
</style>