按住滑块 拖拽验证html5,【原生】JavaScript 实现滑动拖动验证

通常，我们为了防止用户恶意提交表单，会让用户在提交前完成滑动拖动验证，有时候这也能起到一丝反爬的作用。

实现滑动验证的方式当然不止一种，这里我们直接使用原生 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