使用js进行简单的滑块验证是目前比较流行的验证方式，示例和代码实现如下：
按照示例讲解，首先，需要三张图，分别是背景图，盘子，苹果。
背景图是不动的，盘子的位置是随机的，随机数应该由随机数产生，调节盘子图片的left属性改变位置。即盘子的left属性为验证码。
苹果图在range控件的mousemove和valuechange时间下，苹果的位置根据range控件的拉动而改变。
根据苹果和盘子的相对位置进行判断，验证成功可以直接提交表单也间接控制某一button是否可用。
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>滑动验证提交示例</title>
<style>
.yz-bg {
border: 1px solid #000;
height: 100px;
width: 200px;
background:url(../images/UI/y1.jpg) no-repeat center;
}
.yz-rdm {
background:url(../images/UI/y2.png) no-repeat center;
width:76px;height:36px;
position: relative;
bottom:-61px;
left: 64px;
}
.yz-apple {
background:url(../images/UI/y3.png) no-repeat center;
width:60px;height:30px;
position: relative;
bottom:-28px;
left: 72px;
}
input[type=range] {
width: 200px;
-webkit-appearance: none;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
/*input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}*/
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div >
<div class="yz-bg ">
<div runat="server" id="rmd" class="yz-rdm"></div>
<div class="yz-apple" id="conSlide"></div>
</div>
<input type="range" id="range" value="0" onchange="rangechange()" onmousemove="rangechange()"/>
</div>
</form>
</body>
<script>
function rangechange() {
range.max = 160;
conSlide.style.left = (range.value - 10) + "px";
var btn = document.getElementById("ContentPlaceHolder1_btn_comment");
var rmd = document.getElementById("ContentPlaceHolder1_rmd");
if (Math.abs(range.value - 10 - rmd.offsetLeft) < 10) {
btn.disabled = false;
btn.value = "回复";
btn.style.backgroundColor = "#3366ff";
}
else {
btn.value = "失效";
btn.disabled = true;
btn.style.backgroundColor = "gray";
}
}
</script>
</html>
目前基本实现了滑块验证的功能，虽然盘子位置随机数是服务器产生，但盘子的left属性是可读的，因此input-range的数值区间可以估算得出。更安全的做法可以：在后台把盘子和背景图片叠层为一张图片，拖拽range控件时与后台保存的随机数进行验证。前台代码改变不大。