Web-based verification code creation function instance code, web-based verification code creation instance
In web development, the verification code function is often used before logon, registration, or other key functions. Rational Use
The verification function can prevent ddos and crawler attacks.
Effect:
Implementation principle:
The backend provides an interface for generating verification codes. Each request from the front end generates Verification Code images and verification codes. The verification code images are sent to the client for display,
The verification code string is saved in the subsequent Session, and the business interface to be requested by the front-end is compared with the verification code string in the session.
Implementation ideas:
1. the backend provides APIs for generating Verification Code images.
2. The front-end uses the src attribute in img to request the interface generated by the Verification code.
3. Set a click event for img. Each time you click img, the src value will be changed to request src again.
4. Check whether the entered verification code is correct during page interface operations.
Implementation Code:
Front end:
Html:
<Div class = "centent-top" style = ""> <div class = "centent-left"> <span> * </span> Verification Code: </div> <input type = "text" class = "verification-code-input"> <div class = "verification-code"> </div> <div class = "change"> <span> can't see it clearly? </Span> <span style = "color: #37CAF2; cursor: pointer;" id = "changeImgCode"> change one </span> </div>
Js:
Var yzm = document. getElementById ("yzm"); var changeImgCode = document. getElementById ("changeImgCode"); yzm. onclick = function () {changPin ();} changeImgCode. onclick = function () {changPin ();} // function changPin () {$ ("# yzm") for the verification code "). attr ("src", "/SchoolRoll/accuser/code/check? Time = "+ Math. random ());}
The above is an example code of the Web production verification code function introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!