captha.blade.php
4.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<script>
var code;
var code2;
function createCaptcha() {
//clear the contents of captcha div first
var captha1 = $('#captcha1').html();
var captha2 = $('#captcha2').html();
document.getElementById('captcha1').innerHTML = "";
document.getElementById('captcha2').innerHTML = "";
var charsArray =
"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
var lengthOtp = 6;
var captcha = [];
for (var i = 0; i < lengthOtp; i++) {
//below code will not allow Repetition of Characters
var index = Math.floor(Math.random() * charsArray.length + 1); //get the next character from the array
if (captcha.indexOf(charsArray[index]) == -1)
captcha.push(charsArray[index]);
else i--;
}
var canv = document.createElement("canvas");
canv.id = "captcha";
canv.width = 100;
canv.height = 50;
var ctx = canv.getContext("2d");
ctx.font = "25px Georgia";
ctx.strokeText(captcha.join(""), 0, 30);
//storing captcha so that can validate you can save it somewhere else according to your specific requirements
code = captcha.join("");
document.getElementById("captcha1").appendChild(canv);
// adds the canvas to the body element
createCaptcha2()
}
function createCaptcha2() {
//clear the contents of captcha div first
document.getElementById('captcha2').innerHTML = "";
var charsArray =
"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
var lengthOtp = 6;
var captcha = [];
for (var i = 0; i < lengthOtp; i++) {
//below code will not allow Repetition of Characters
var index = Math.floor(Math.random() * charsArray.length + 1); //get the next character from the array
if (captcha.indexOf(charsArray[index]) == -1)
captcha.push(charsArray[index]);
else i--;
}
var canv = document.createElement("canvas");
canv.id = "captcha";
canv.width = 100;
canv.height = 50;
var ctx = canv.getContext("2d");
ctx.font = "25px Georgia";
ctx.strokeText(captcha.join(""), 0, 30);
//storing captcha so that can validate you can save it somewhere else according to your specific requirements
code2 = captcha.join("");
document.getElementById("captcha2").appendChild(canv);
// adds the canvas to the body element
}
function validateCaptcha() {
if (document.getElementById("cpatchaTextBox").value == code) {
console.log('Валидная капча 1!');
}else{
alert("Неверная капча! Повторите вновь");
createCaptcha();
}
}
function validateCaptcha2() {
if (document.getElementById("cpatchaTextBox2").value == code2) {
console.log('Валидная капча 2!');
}else{
alert("Неверная капча! Повторите вновь");
createCaptcha();
}
}
</script>
<script>
$(document).ready(function() {
$('#Reloadcapcha1').on('click', function() {
console.log('click button reload captha');
createCaptcha()
});
$('#Reloadcapcha2').on('click', function() {
console.log('click button reload captha 2');
createCaptcha2()
});
let form1 = document.getElementById('form1');
form1.addEventListener('submit', function (event) {
if (document.getElementById("cpatchaTextBox").value == code) {
console.log('Валидный кот');
return true;
} else {
console.log('Ошибка1');
event.preventDefault();
return false;
}
});
let form2 = document.getElementById('form2');
form2.addEventListener('submit', function (event) {
if (document.getElementById("cpatchaTextBox2").value == code2) {
console.log('Валидный кот');
return true;
} else {
console.log('Ошибка2');
event.preventDefault();
return false;
}
});
});
</script>