[5 tipos de verificación de inicio de sesión] 5 tipos de componentes de código de verificación de inicio de sesión basados en jquery (con código fuente completo)

---

---

escrito delante

Antes de escribir artículos, siempre tengo la costumbre de explicar mi experiencia creativa. De hecho, me temo que no recordaré bien cuando sea mayor. Esta vez, accidentalmente recurrí al proyecto de reparación de vulnerabilidades de seguridad que hice la última vez. Hay una verificación de inicio de sesión en él. Para evitar que algunas máquinas simulen el inicio de sesión, no es necesario agregar un código aleatorio para completar la verificación. Esta vez analizaré los cinco componentes de códigos de verificación comunes en el mercado desde la perspectiva del Interfaz.

Puntos de conocimiento involucrados

Una variedad de códigos fuente de implementación del código de verificación de inicio de sesión de front-end, demostración común de implementación de verificación de verificación de inicio de sesión, cómo implementar el código de verificación de operación digital, código de verificación de letras aleatorias, método de implementación del código de verificación de arrastrar el control deslizante, hacer clic en el método de implementación del código de verificación de texto en orden, cómo Implemente el código de verificación que arrastra el bloque faltante a la posición correcta, una variedad de métodos de implementación del código de verificación de front-end y 5 demostraciones comunes de implementación de códigos de verificación de front-end.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

[Recuerde] De hecho, los siguientes cinco códigos de verificación web se implementan principalmente mediante la introducción del componente verificar.js y se basan en jquery. Usted mismo puede descargar el código fuente completo en el Capítulo 6.

1. Código de verificación de letras aleatorias

Este es nuestro código de verificación más común al principio. Al generar números aleatorios o letras en inglés, o una combinación de los dos, puede hacer clic para generar aleatoriamente y la coincidencia de entrada final pasará la verificación.

1.1 Efecto

1.2 Realizar el código fuente

código fuente html

<div class="validatePart">
	<h3>随机数字字符验证码</h3>
	<div id="mpanel2">
	</div>
	<button type="button" id="check-btn" class="verify-btn">确定</button>
</div>

código fuente js

$('#mpanel2').codeVerify({
    
    
	type: 1,
	width: '200px',
	height: '50px',
	fontSize: '30px',
	codeLength: 6,
	btnId: 'check-btn',
	ready: function () {
    
    
	},
	success: function () {
    
    
		alert('验证匹配！');
	},
	error: function () {
    
    
		alert('验证码不匹配！');
	}
});

2. Código de verificación de operación digital

De hecho, este es el más común en el sitio web oficial para consultar los resultados de la prueba suave anterior. En ese momento, para verificar los resultados de la prueba suave, revisé muchas operaciones matemáticas de la escuela primaria.

2.1 Efecto

2.2 Realizar el código fuente

código fuente html

<div class="validatePart">
	<h3>数字运算验证码</h3>
	<div id="mpanel3" style="margin-top: 20px">
	</div>
	<button type="button" id="check-btn2" class="verify-btn">确定</button>
</div>

código fuente js

$('#mpanel3').codeVerify({
    
    
	type: 2,
	figure: 100,	//位数，仅在type=2时生效
	arith: 0,	//算法，支持加减乘，不填为随机，仅在type=2时生效
	width: '200px',
	height: '50px',
	fontSize: '30px',
	btnId: 'check-btn2',
	ready: function () {
    
    
	},
	success: function () {
    
    
		alert('验证匹配！');
	},
	error: function () {
    
    
		alert('验证码不匹配！');
	}
});

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

3. Código de verificación deslizante

De hecho, el control deslizante también es común en la verificación humano-computadora posterior: estaba muerto al principio y fue reconocido y simulado por muchos algoritmos de rastreo, por lo que surgió el método de arrastrar y verificar.

3.1 Efecto

3.2 Realizar el código fuente

código fuente html

<div class="validatePart">
	<h3>滑块拖动验证码</h3>
	<div id="mpanel1">
	</div>
</div>

código fuente js

$('#mpanel1').slideVerify({
    
    
	type: 1,		//类型
	vOffset: 5,	//误差量，根据需求自行调整
	barSize: {
    
    
		width: '80%',
		height: '40px',
	},
	ready: function () {
    
    
	},
	success: function () {
    
    
		alert('验证成功，添加你自己的代码！');
		//......后续操作
	},
	error: function () {
    
    
		//		        	alert('验证失败！');
	}
});

4. Código de verificación de finalización de imagen

Este es algo similar al tercero, pero es más exigente, hay que arrastrarlo a una posición precisa para pasar la verificación, además es el método de verificación de seguridad más utilizado en el mercado.

4.1 Efecto

4.2 Realizar el código fuente

código fuente html

<div class="validatePart">
	<h3>图片补全验证码</h3>
	<div id="mpanel4" style="margin-top:0px;">
	</div>
</div>

código fuente js

$('#mpanel4').slideVerify({
    
    
	type: 2,		//类型
	vOffset: 5,	//误差量，根据需求自行调整
	vSpace: 5,	//间隔
	imgName: ['1.jpg', '2.jpg'],
	imgSize: {
    
    
		width: '400px',
		height: '200px',
	},
	blockSize: {
    
    
		width: '40px',
		height: '40px',
	},
	barSize: {
    
    
		width: '400px',
		height: '40px',
	},
	ready: function () {
    
    
	},
	success: function () {
    
    
		alert('验证成功，添加你自己的代码！');
		//......后续操作
	},
	error: function () {
    
    
		//		        	alert('验证失败！');
	}
});

5. Haga clic en el código de verificación en orden.

Al principio, debería ser el sistema de emisión de billetes de tren. En ese momento, mucha gente se quejaba de ello. Era para saber qué tipo de ollas y sartenes hacer clic y verificar. Esta es ahora una forma diferente, que es Vaya a varias alternativas según el texto proporcionado. Averíguelo; de lo contrario, no pasará la verificación. En términos relativos, debe tener capacidad de reconocimiento de texto (imagen).

5.1 Efecto

5.2 Realizar el código fuente

código fuente html

<div class="validatePart">
	<h3>按顺序点选验证码</h3>
	<div id="mpanel6" style="margin-top:10px;">
	</div>
</div>

código fuente js

$('#mpanel6').pointsVerify({
    
    
	defaultNum: 4,	//默认的文字数量
	checkNum: 2,	//校对的文字数量
	vSpace: 5,	//间隔
	imgName: ['1.jpg', '2.jpg'],
	imgSize: {
    
    
		width: '600px',
		height: '200px',
	},
	barSize: {
    
    
		width: '600px',
		height: '40px',
	},
	ready: function () {
    
    
	},
	success: function () {
    
    
		alert('验证成功，添加你自己的代码！');
		//......后续操作
	},
	error: function () {
    
    
		//		        	alert('验证失败！');
	}
});

Principalmente enumero y muestro algunos escenarios comunes de verificación de inicio de sesión que he visto, con la esperanza de permitirle aprender algo sobre la verificación de inicio de sesión web. Por supuesto, si tiene más escenarios de códigos de verificación de front-end, puede dejar un mensaje Ja, aprenda de ¡unos a otros y progresar juntos!

6. Compartir código fuente

6.1 Disco de red Baidu

Enlace: https://pan.baidu.com/s/1W2tzFkQN99vkjzfZf4K67w
Código de extracción: hdd6

6.2 123 disco de red

Enlace: https://www.123pan.com/s/ZxkUVv-AaI4.html
Código de extracción: hdd6

6.3 Mensaje de correo electrónico

Deja tu cuenta de correo electrónico en el área de comentarios y el blogger te lo enviará tan pronto como lo vea ¡Te deseo una vida feliz!

---

Resumir

Lo anterior es de lo que quiero hablar hoy. Este artículo presenta principalmente el código fuente de implementación de varios códigos de verificación de inicio de sesión de front-end, demostraciones de implementaciones de verificación de verificación de inicio de sesión comunes, cómo implementar códigos de verificación de operaciones digitales, códigos de verificación de letras aleatorias y arrastre el código de verificación del control deslizante., haga clic en el método de implementación del código de verificación de texto en orden, cómo implementar el código de verificación que arrastra el bloque faltante a la posición correcta, múltiples métodos de implementación del código de verificación de front-end, 5 implementaciones comunes de código de verificación de front-end demostraciones y espero con ansias el progreso de todos juntos. ¡Trabajemos juntos en 2023! ! !

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。