uniapp中简单的前端文字校验

效果示例图

代码组件 components/mz-verity/mz-verity.vue

<template>
	<view class="verity-wrap">
		<view class="verity-box">
			<view class="verity-content">
				<image class="verity-bg" :src="bgUrl"></image>
				<template v-for="(item, index) in point">
					<view class="fl" :class="{ 'verity-select': item.isSelect }" :key="index" :style="{ left: item.left, top: item.top }" @click="verityCodeHandle(index,item.value)">
						<view class="fl-box">
							<text class="fl-value" :style="{ transform: `rotate(${item.rotate}deg)` }">{{ item.value }}</text>
							<text class="fl-count" v-if="item.count">{{ item.count }}</text>
						</view>
					</view>
				</template>
				<!-- 刷新页面 -->
				<image class="verity-freshbtn" :style="{ transform: `rotate(${refreshRotate}deg)` }" src="@/static/sliderefreshBtn.png"></image>
				<text class="verity-freshtxt">刷新</text>
				<view class="refresh-box" @click="freshHandle"></view>
			</view>
			<view class="verity-footer">
				<text>请依次点击：</text>
				<text class="verity-footer-code">{{ code }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'mz-verity',
	props: {
		isShow: {
			type: Boolean,
			default: () => {
				return false;
			}
		}
	},
	data() {
		return {
			//用户需要校验值
			code: '三羊开泰',
			//干扰值
			confuseDic: '祖国万岁',
			//背景图片
			bgUrl: '',
			//显示在模板上的值
			point: [],
			//点击获取值的数量
			count: 0,
			//点击获取值
			verityCodeList: {},
			//按钮旋转
			refreshRotate: 0
		};
	},
	mounted() {
		this.initVerity();
	},
	methods: {
		initVerity() {
			const code = this.code + this.confuseDic;
			const space = [{
							left: '30px',
							top: '5px'
						},
						{
							left: '70px',
							top: '60px'
						},
						{
							left: '160px',
							top: '15px'
						},
						{
							left: '260px',
							top: '40px'
						},
						{
							left: '230px',
							top: '80px'
						},
						{
							left: '181px',
							top: '117px'
						},
						{
							left: '150px',
							top: '60px'
						},
						{
							left: '13px',
							top: '80px'
						},
						{
							left: '70px',
							top: '130px'
						},
						{
							left: '130px',
							top: '120px'
						},
						{
							left: '20px',
							top: '160px'
						},
						{
							left: '260px',
							top: '150px'
						}
					];
			space.sort(() => {
				return Math.random() - 0.5;
			});
			let tempPoint = [];
			for (let i = 0; i < code.length; i++) {
				tempPoint.push({
					left: space[i].left,
					top: space[i].top,
					value: code[i],
					rotate: Math.random() * 360,
					isSelect: false
				});
			}
			this.count = 0;
			this.point = tempPoint;
			this.verityCodeList = {};
		},
		/**
		 * 刷新
		 * **/
		freshHandle() {
			this.refreshRotate += 360;
			this.initVerity();
		},
		/**
		 * 点击选中
		 * **/
		verityCodeHandle(index) {
			if (this.count <= 3) {
				this.point[index].isSelect = true;
					const verityCodeList = this.verityCodeList;
					verityCodeList[value + '' + index] = this.point[index].value;
					this.verityCodeList = verityCodeList;
					this.count = Object.keys(verityCodeList).length;

				this.point[index].count = this.count;
				if (this.count == 4) {
					let tempCode = '';
					const code = this.code;
					for (let value in verityCodeList) {
						tempCode += verityCodeList[value];
					}
					if (tempCode == code) {
						this.$emit('verity', {
							type: 'success',
							code: tempCode
						});
					} else {
						this.$emit('verity', {
							type: 'fail',
							code: tempCode
						});
						this.initVerity();
					}
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.verity-wrap {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	.verity-box {
		width: 320px;
		min-height: 200px;
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);

		.verity-content {
			border: 2px solid #fff;
			width: 100%;
			height: 200px;
			background-color: #ffffff;
			position: relative;
			.verity-bg {
				width: 100%;
				height: 100%;
				display: block;
				opacity: 0.5;
			}
			.fl {
				position: absolute;
				font-size: 18px;
				color: #ff0000;
				cursor: pointer;
				.fl-box {
					position: relative;
					.fl-value {
						display: inline-block;
					}
					.fl-count {
						position: absolute;
						top: -10px;
						left: 25px;
						color: #ff0000;
						font-size: 14px;
					}
				}
			}
			.verity-select {
				background-color: #d1c09d;
				border-radius: 50%;
				width: 30px;
				height: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}
			.verity-freshbtn {
				width: 20px;
				height: 20px;
				position: absolute;
				top: 7px;
				right: 50px;
				z-index: 5;
				transition: all 1s ease;
			}
			.verity-freshtxt {
				color: #333;
				font-size: 16px;
				position: absolute;
				top: 6px;
				right: 9px;
				z-index: 5;
			}
			.refresh-box {
				width: 60px;
				height: 20px;
				position: absolute;
				right: 9px;
				top: 7px;
				z-index: 6;
			}
		}

		.verity-footer {
			width: 100%;
			height: 50px;
			background-color: #d1c09d;
			font-weight: 500;
			color: #ffffff;
			font-size: 16px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10px;
			.verity-footer-code {
				font-weight: bold;
				padding-left: 5px;
			}
		}
	}
}
</style>

使用

<mz-verity @verity="verityHandle"></mz-verity>