vk-uview パスワードと確認パスワードの検証に基づく uni-app

早速、コードに進みましょう。

<template>
	<view class="login">
		<view class="logo">
			<u-image width="300rpx" height="200rpx" src="https://gd-hbimg.huaban.com/52d3a006a13293ac2e7cf26f13df223261c7cb9580ec-kdap4s_fw658webp"></u-image>
		</view>
		<view class="login_form" >
						<u-form :model="form" ref="form1" label-width="140">
							<u-form-item label="账号" prop="name">
								<u-input v-model="form.name" />
							</u-form-item>
							<u-form-item label="密码" prop="password">
								<u-input v-model="form.password" type="password"/>
							</u-form-item>
							<u-form-item label="确认密码" prop="repassword">
								<u-input v-model="form.repassword" type="password"  />
							</u-form-item>
						</u-form>
						<u-button @click="submit">提交</u-button>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					password: '',
					repassword: ''
				},
				rules: {
					name: [
						{ 
						required: true, 
						message: '请输入用户名', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
										return String(value);
							},
							message: '用户名只能包含字母或数字',
							trigger: ['change','blur'],
						},
					],
					 password: [
					    { required: true, message: '请输入密码' },
					    { min: 6, max: 20, message: '密码长度为6-20位' },
					    { validator:this.checkPasswordStrength, trigger: ['blur', 'change'] }
					  ],
					  repassword: [
					    { required: true, message: '请再次输入密码' },
					    { validator: this.checkRepassword, trigger: ['blur', 'change'] }
					  ]
				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods:{
			submit() {
				 const {password, repassword} = this.form
				this.$refs.form1.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			    checkPasswordStrength(rule, value, callback) {
			      if (!value) {
			        callback(new Error('请输入密码'));
			      } else if (value.length < 6) {
			        callback(new Error('密码长度不能小于6位'));
			      } else if (value.length > 20) {
			        callback(new Error('密码长度不能大于20位'));
			      } else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value) || !/\d/.test(value) || !/[^a-zA-Z\d]/.test(value)) {
			        callback(new Error('密码需包含数字、大小写字母以及特殊字符'));
			      } else {
			        callback();
			      }
			    },
			    checkRepassword(rule, value, callback) {
			      if (!value) {
			        callback(new Error('请再次输入密码'));
			      } else if (value !== this.form.password) {
			        callback(new Error('两次输入的密码不一致'));
			      } else {
			        callback();
			      }
			    },
		},
	
	}
</script>

<style lang="scss">
	.logo{ margin-left:25% }
	.login{
		padding:30rpx 40rpx; font-size:25rpx; text-align: center;
	}
</style>

上記は、{uni-app,vk-uview3 コンポーネント} に基づいた個人的なメモです。

通常使用したい場合は、 vue3 で vk-uviewを設定してくださいhttps://vkuviewdoc.fsq.pub/components/intro.html uni-app uview コンポーネントのインストール