CAPTCHA is implemented in two ways

Case 1: CAPTCHA together with SMS verification code, simply provide background Dynamic Link To fill to (id = "img") in the src can generate dynamic verification code.

Then the information, request interface where needed, just the (id = "imgCode") entered by the user to the backed ajax verify whether the correct verification code.

Principle (background): Background on the session by a string and store pictures after the reception request, over the input string parameter band, it does determine whether or not the same.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图形验证码</title>
</head>
<body>
    <form>
        <div class="imgCodeBox">
            <label for="imgCode">图形验证码</label>
            <input type="text" placeholder="请输入验证码" id="imgCode">
            <img src="" id="img"> 
        </div>
    </form>
</body>
</html>

Case 2: js implemented by generating a random number

1, create a graphic container yard

<label class="myLabel">图形码：
    <input type = "button" id="code" onclick="createCode()" style="border: 0;background-color: transparent;padding: 0;"/>
</label>

2, generates a verification code and call when the page loads and when clicked

// CAPTCHA 
        var code; // global codes defined 
        // generated codes 
        the window.onload = function the createCode () { 
            code = "" ;
             var CodeLength =. 4; // verification length code 
            var checkCode = Document. the getElementById ( "code" );
             var Random = new new the Array (0,1,2,3,4,5,6,7,8,9, 'A', 'B', 'C', 'D', ' E ',' F ',' G ',' H ',' I ',' J ',' K ',' L ',' M ',' N ',' O ',' P ',' Q ' , 'R & lt' ,
                 'S', 'T', 'the U-', 'V','W','X','Y','Z');//随机数
            for(var i = 0; i < codeLength; i++) {//Cyclic operation 
                var index = Math.floor (Math.random () * 36); // obtain index random number (0 ~ 35) 
                code + = Random [index]; // obtain random numbers are added to the index code 
            } 
            checkCode.value = code; // the code value assigned codes 
        }

CAPTCHA is implemented in two ways

Guess you like