Thursday, 7 June 2018

Simpe Captcha Code Verification Project

**********************CaptchaSelf.js**********************

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function VerifyEBot(e) {
    _CaptchaFlag = e
    alert(e == true ? 'Looks like you are not a robot...' : 'You have selected wrong image...');
    return _CaptchaFlag;
}
var LoadCaptcha = function (eleId) {
    var aa = randomIntFromInterval(1, 90);
    var bb = aa + 1;
    var htmlStr = '';

    var _diffImgIndex = randomIntFromInterval(0, 4);
    var _sameImg = '<td onclick=VerifyEBot(false)><img src="/Captcha/icons/dark/icon-' + aa + '.png" alt="Alternate Text" /></td>';
    var _diffImg = '<td onclick=VerifyEBot(true)><img src="/Captcha/icons/dark/icon-' + bb + '.png" alt="Alternate Text" /></td>';
    switch (_diffImgIndex) {
        case 0:
            htmlStr += _diffImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            break;
        case 1:
            htmlStr += _sameImg
            htmlStr += _diffImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            break;
        case 2:
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _diffImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            break;
        case 3:
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _diffImg
            htmlStr += _sameImg
            break;
        default:
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _diffImg
            break;
    };
    $('#' + eleId).append(htmlStr);
};



********************************Index.html*************************************


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>app</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="~/Captcha/CaptchaSelf.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    @*<script src="~/Captcha/js/script.js"></script>
        <link href="~/Captcha/style/css/style.css" rel="stylesheet" />*@
    <style>
        #ID_Captcha_Table {
            margin: 5px;
        }

        #ID_TD_Captcha td {
            border: 5px solid black !important;
            background-color: green;
            border-color: white;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
        }

            #ID_TD_Captcha td:hover {
                background-color: darkgray;
                border-color: white;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
                transition: border-width 0.2s ease-out;
            }
    </style>
</head>
<body>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <label class="col-xl-4 col-lg-4 label-info form-control">name</label>
            <input id="id_name" class="col-xl-8 col-lg-8 form-control" type="text" name="name" />
        </div>
    </div>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <label class="col-xl-4 col-lg-4 label-info form-control">password</label>
            <input id="id_password" class="col-xl-8 col-lg-8 form-control" type="password" name="password" />
        </div>
    </div>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <label class="col-xl-4 col-lg-4 label-info form-control">Select an odd image from below</label>
        </div>
    </div>

    <div class="col-xl-4 col-lg-4">
        <div class="col-xl-4 col-lg-4">
            <table id="ID_Captcha_Table" class="table table-bordered">
                <tr id="ID_TD_Captcha"></tr>
            </table>
        </div>
    </div>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <input id="ID_Save_Btn" type="button" name="name" value="Save" />
        </div>
    </div>
</body>
</html>
<script>
    var _CaptchaFlag = false;
    $(document).ready(function () {
        LoadCaptcha('ID_TD_Captcha', _CaptchaFlag);
    });
    $('#ID_Save_Btn').click(function () {
        console.log(document.getElementById('ID_TD_Captcha'))
        var _name = $('#id_name').val();
        var _password = $('#id_password').val();
        if (_name == undefined || _name == "") {
            alert('Please enter name');
            return;
        }
        if (_password == undefined || _password == "") {
            alert('Please enter password');
            return;
        }
        if (_CaptchaFlag == false) {
            alert('Please verify captch verification');
            return;
        }
        alert('Verified \nname : ' + _name + '\nPassword : ' + _password + '\nCaptchaFlag : ' + _CaptchaFlag);
    });
</script>


at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

SQL STUFF Function and Get common grid data with pagination, filteration, sorting by sp & functions

========================================================================= STUFF FUNCTION ===================================================...