通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用。
实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现。
现在,你可以在 这里 看到完整的源码,欢迎 Star 哦😄。
原生实现
原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作。
滑块验证的结构主要分为四个部分:轨道、滑块、背景和文案,我们可以使用下面的 HTML 结构来表示。
基本思路就是我们给滑块(.slide-block)添加相应的事件,在按下滑块时记录鼠标的当前位置并添加滑动事件,在滑动过程中根据鼠标的移动来移动滑块的位置和增加背景元素(.slide-bg)的宽度,直到移动到轨道(.slide-track)的末端后,改变文案(.slide-text)来提示成功。
样式
在开始写脚本之前可以先来完成一下它们的样式,这让滑块相关的部分看起来更好,也让后面的工作更愉快的进行。/* 样式的注意事项 */
样式的写法就不贴了,相信大家一看就懂,而且会有更好的实现。需要的话,也可以在 Github 上找到。
脚本
现在开始来实现脚本的内容,首先我们对 document.querySelector 方法进行简单的封装以方便后续操作 DOM 元素。function $(selectors) {
return document.querySelector(selectors);
}
然后通过自定义的 _h 函数我们可以很方便的创建上面的 HTML 结构,并添加到文档中。function _h(tagName, propMap = {}, text) {
const ele = document.createElement(tagName);
Object.keys(propMap).forEach(prop => ele.setAttribute(prop, propMap[prop]));
if (text) {
ele.appendChild(document.createTextNode(text));
}
return ele;
}
class SlideUnlock {
constructor(el = "body", options = {}) {
this.$el = $(el)
this.$$isSuccess = false
this.$options = { // 默认配置
tip: '请按住滑块,拖动到最右边',
unlockText: '验证成功',
duration: 500,
...options
}
}
init()