uniapp之相关校验问题

我爱海鲸 2023-11-29 15:45:06 前端

简介input清空、跳转到支付宝小程序的页面

1、有一个这样的需求,就是在输入框中校验是否存在中文,如果有中文就清空输入框,并提示“不能输入中文”,如果是密码输入框是没有问题的,但是在转换为明文之后就能够输入中文了,所以我们需要多做一次校验

<input class="password" :type="passwordType" v-model="passwordValue" @input="checkInput" placeholder="请输入密码"/>

const passwordType = ref('password')

const passwordValue= ref('')

	// 限制输入中文
	const checkInput = (event) =>{
		if (passwordType.value !== 'password') {
			 passwordValue.value = event.detail.value;  
			 const regex = /[\u4e00-\u9fa5]/g; // 正则表达式,匹配包含中文字符的字符串   
			 if (regex.test(passwordValue.value)) {  
					setTimeout(() => { 	passwordValue.value = '' }, 0)
					uni.showToast({ title: '密码不能输入中文', icon: 'none' }); // 提示用户只能输入中文  
			 }  
		}
	}

这里有一个需要注意的地方,setTimeout(() => {     passwordValue.value = '' }, 0)如果直接使用passwordValue.value = '' 的话会有不生效的问题

参考这一篇文章:

https://ask.dcloud.net.cn/question/84850

2、跳转到支付宝小程序的页面

<template>
	<view>
		<view class="header-content-box">
		<tui-button type="primary" @click="goZhiFuBao">跳转到支付宝</tui-button>
		</view>
	</view>
</template>

<script setup>
	
	// 去支付宝
	const goZhiFuBao = () =>{
		//#ifdef H5
			uni.showModal({
				icon:'none',
				title:'跳转到支付宝小程序'
			})
		//#endif
		//#ifdef APP-PLUS
		let alipayUrl = ''
		if (uni.getSystemInfoSync().platform == "ios") {
			alipayUrl = 'alipay://platformapi/startapp?appId=123';
		} else {
			alipayUrl = 'alipays://platformapi/startapp?appId=123';
		}

			//alipayUrl 已经有? 问号了,所以这里需要进行编码
				let params = encodeURIComponent('?id=123')
		// page=pages/index/index  跳转到支付宝小程序页面的页面路径
				alipayUrl = `${alipayUrl}&page=page/index/index${params}`
					//唤起支付宝
				plus.runtime.openURL(alipayUrl);
		//#endif
	}
</script>

<style socped>

	.header-content-box{
		width: 750rpx;
		height: 600rpx;
		background: linear-gradient(180deg, #E7FFFC 0%, #FFFFFF 100%);
				padding-top: var(--status-bar-height);
	}

</style>

参考文章:

https://opendocs.alipay.com/support/01rb18

 

 

你好:我的2025