基于 jQuery UI 的解锁验证(代替验证码)

在使用ThinkPHP开发网站时，验证码真让人头疼，不是出不来，就是取不到值，索性看电影去。玩手机时，突然来了灵感，能不能用手机一样的解锁模式来解锁当前的表单，来防止机器注册呢？经过验证，这个办法还真行，下面把我的思路和代码共享出来。

这是我最初设计的图纸

这张是实际效果图

1、 准备好插件

bootstrap，jQuery ui (介个下载地址地球人都不知道，我就不贴了)
直接在需要的页面引入就行了，jQuery ui 的js 文件我修改过的，你要是不用我提供的需要在js文件加一行代码，下面会说

2、表单代码我就不全贴上了，在下面我会放出下载地址

<div class="form-group">
  <label for="sliderLock" class="col-xs-2 control-label">解锁验证</label>
  <div class="col-xs-7">
    <div id="slider" class="sliderLock">
      <p>Slide to Unlock</p>
    </div>
    <label class="control-label helplable" for="sliderLock">用鼠标点击箭头向右滑动解锁</label>
  </div> 
</div>

样式我选择的使用的是iPhone的横向滑动解锁样式(买不起爱疯啊)

#slider {
 height: 35px;
 position: relative;
 padding-left: 40px;
}
#slider p {
 top: 7px;
 left: 100px;
 color: #aaa;
 position: absolute;
}
#slider a {
 top: 2px;
 height: 29px;
 width: 40px;
 margin-left: 2px;
 font-size: 20px;
 padding-left: 8px;
}

注意了，主菜开始上了啊

$(function() {
 $("#slider").slider({
  change: refreshSwatch
 });
 // 上面说的你要是直接使用官方的ui js 文件, 要加入以代码
 // $("#slider").html('<span class="glyphicon glyphicon-arrow-right"></span>');
});
function refreshSwatch() {
 $SliderValue=$('#slider').slider( "value" );
 if($SliderValue==100){
  $('#slider').slider( "value", 86 );
  $("#slider").unbind();
 }
}

下面来说说我的思路，
1、加载页面时，禁用表单，或者干你想干的事儿
2、滑动解锁，当滑块的值达到100时，解除当前ID绑定的函数，使滑块定位在当前，这地方有点坑，滑块的值到100时，已经跑到外面去了，所以设置这个值等于86时就刚好在最右边，这个可以根据你的实际情况修改
3、在解除当前ID绑定的函数之前，也就是$("#slider").unbind();这句代码之前，启用表单，或者还是那句话：干你想干的事儿，哈哈，

下载地址：

http://git.oschina.net/wanderingies/SliderLock/attach_files

才疏学浅，大神勿喷，不喜勿喷。