easyVer

This project had been abandoned!!!

yahoo! It can be unbelievably easy to fight with robots by including this Plugin~

What is easyVer?

easyVer is a friendly plugin which can help you expel robots which are trying to steal user infomation from your website.
With the help of easyVer you can easily identify whether it is a robot who is visiting your website.
Basing on easyVer, it becomes quick and convenient for users to finish their login process which can make your site more friendly.

Quick start

Click here to see how it works!

How to use easyVer?

• To use easyVer, you must include the jquery.min.js and easyVer.min.js first.
  
• To keep the image displayed in shape, you also need to include the easyVer.min.css before using it in your HTML.
  
• To display a verification window, you only need to cite easyVer() in your js code.
  
• Please store the function name which you want to run after the verification in the global variable callBackFunctionName before citing easyVer().
  
• In your HTML body, you need to include a div which class is verBox.
  A simple example:

<!--include easyVer css file-->
<link type="text/css" rel="stylesheet" href="https://cdn.yimian.ac.cn/easyVer/easyVer.min.css">

<!--Put this div in your HTML body-->
<div class="verBox"></div>


<!--include jquery and easyVer js file::the js MUST be put AFTER the div-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.ac.cn/easyVer/easyVer.min.js"></script>

<!--demo script for using easyVer-->
<script type="text/javascript">

//This is to indicate what js need to do after a user verification-->
callBackFunctionName="your_callBack_function";

//Cite to setup verification window::This should after the callback function assignment
easyVer();

//use this function to show a easyVer window
show_easyVer();

//demo callback function
function your_callBack_function()
{
	alert('Verification finished!');
}

</script>

Advanced Setting

• You can learn about the advanced setting in the following demo

<script>

//This function can directly set a new easyVar 
imgVer({
       el:'$("#imgVer")',//This should 
       width:'260',//difine the width and height of the easyVer window
       height:'116',
       success:function () {//If verification success, run the following code
           $(".login").css({//move the login class back
               "left":"0",
               "opacity":"1"
           });
           $(".verBox").css({//hide the easyVer window
               "left":"404px",
               "opacity":"0"
           });
       },
       error:function () {//When error
           //alert('error');
       }
   });

//when submit class being click
$(".submit").on('click',function () { //This is demo that listen click event of submit class
           
       $(".login").css({ //hide the login window
           "left":"-404px",//If you have a .login class in your body, this can help you display more friendly effect
           "opacity":"0"
       });

       $(".verBox").css({ //This indicate to display easyVer window
           "left":"0",
           "opacity":"1"
       })      
})

</script>