Verify.js is a plugin for verifying that users are not robort, which contains five ways such as regular,slide,calculation, puzzle and choosing words in order.
GitHub here
More documents here
Step1:
<!--link CSS-->
<link rel="stylesheet" type="text/css" href="css/verify.css">
<!--link JQUERY-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--link JS-->
<script type="text/javascript" src="js/verify.min.js"></script>
HTML:
 |
| HTML |
Basic html for five types of verifications.
HEAD:
 |
| HEAD |
Link the verify.css file in the head. And a little stylish for sections.
Step2:
JS
 |
| link js in body |
(1)regular
 |
| panel1.js |
$('#id').codeVerify({attributes...});
Expaination:
| attribures | explain |
|---|
type | default is 1. |
width | the width of verification code, percentage available |
height | the height of verification code, percentage available |
fontSize | teh font size.default is 30px。 |
codeLength | the number of verificaiton code.default is 6 |
btnId | the id name combined to the button |
events
| name | expain |
|---|
ready | the function when ready |
success | the events function after success verifying. If you want to refresh：success:function(obj){obj.refresh();}。 |
error | the function when the verification is not successd |
(2)calculation
 |
| panel2.js |
$('#id').codeVerify({attributes...});
| attributes | explain |
|---|
type | type is 2 |
figure | default is 100,double-digit numbers. |
arith | plus,minus, multiple awaiable.plus=1,minus=2,multiple=3.random=0 |
(3)slide
 |
| panel3.js |
Explaination
| attributes | expain |
|---|
type | default=1 |
vOffset | magnitude of error |
barSize | Width and height of bar. eg：barSize:{width:'100%',height:'40px'} |
events
| name | expain |
|---|
ready | the function when ready |
success | the events function after success verifying. If you want to refresh：success:function(obj){obj.refresh();}。 |
error | the function when the verification is not successd |
(4)puzzle
 |
| panel4.js |
$('#id').slideVerify({attributes....});
expaination
| attrributes | explain |
|---|
type | default=2 |
vOffset | magnitude of error |
vSpace | the space between image and bar.units:px |
imgName | the array of images，default from the folder "images"，eg：imgName : ['1.jpg', '2.jpg']。 |
imgSize | Width and height of images.eg:imgSize:{width:'100%',height:'200px'}。 |
blockSize | width and height of blocks. eg：imgSize:{width:'40px',height:'40px'}。 |
barSize | width and height of bar. eg：barSize:{width:'100%',height:'40px'} |
events
| name | expain |
|---|
ready | the function when ready |
success | the events function after success verifying. If you want to refresh：success:function(obj){obj.refresh();}。 |
error | the function when the verification is not successd |
(5)choosing words in order
 |
| panel5.js |
$('#id').pointsVerify({attributes...});
explaination
| attributes | explain |
|---|
defaultNum | the number of verifying words.defaultNum:4。 |
checkNum | compare words number.checkNum:2。 |
vSpace | the space between image and bar.units:px |
imgName | the array of images，default from the folder "images"，eg：imgName : ['1.jpg', '2.jpg']。 |
imgSize | Width and height of images.eg:imgSize:{width:'100%',height:'200px'}。 |
barSize | width and height of bar. eg：barSize:{width:'100%',height:'40px'} |
events
| name | expain |
|---|
ready | the function when ready |
success | the events function after success verifying. If you want to refresh：success:function(obj){obj.refresh();}。 |
error | the function when the verification is not successd |
