# slide-verification

**Repository Path**: tcweidao/slide-verification

## Basic Information

- **Project Name**: slide-verification
- **Description**: 一个及其简单的滑动验证插件，可高度自定义，无任何第三方依赖
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2020-01-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# slide-verification
## 一个极其简单的验证插件，可高度自定义
slide、slider, 极验验证，滑动验证

### 使用：

- 直接引入js/main.js 即可， 无需任何第三方依赖

### 可配置参数：

```javascript
    var verification = new Verification({

        // 元素将被插入的位置(必须是一个唯一ID) required
        el: "box",

        // 图像 required
        src: images[0],

        // 宽度 default: 300
        width: 300,

        //高度 default: 200
        height: 200,

        // 成功的回调
        success: function () {
            console.log('success');
        },

        // 是否渲染图像底部的滑块 default: true
        renderSlider: true,

        // 图像剪切区域的上面 和 右边的弧形大小 default: 20
        iconSize: 20,

        // 滑块是否在y轴剧中 default: true
        centerY: true,

        // 剪切的滑块的大小 default: 40
        blockSize: 40,

        // 剪切后滑块的填充颜色 default: #F2F2F2
        fillColor: "F2F2F2",
        
        // 默认显示的文字 default: 请移动滑块完成验证
        defaultText: "请移动滑块完成验证",

        // 验证成功显示的文字 default: 验证成功
        successText: "验证成功",
    });
```

### 样式设置：

- 底部滑块的每一个DOM元素都有对应的class
- 可通过审查DOM元素来设置对应的样式

### 自定底部滑块验证：

- 可根据 **var verification = new Verification()** 的实列对象来控制验证

- 自定义底部的滑动按钮

  ##### 实列方法：

  ```javascript
      var images = [
          'images/1.jpg',
      ];
      var verification = new Verification({
  
          // 元素将被插入的位置 required
          el: "box",
  
          // 图像 required
          src: images[0],
          
          // 自定义滑动的验证 为false 将不会渲染底部的滑动按钮
          renderSlider: false,
          
          // 成功的回调
          success: function () {
              console.log('success');
          },
  
      });    
  	var x = 0;
      function btnMove() {
          x += 1;
          var result = verification.move(x);
          if (result.state) {
              // 验证成功
          }
      }
  ```


### 图片：

![验证成功](https://github.com/15523257452/slide-verification/blob/master/images/demo01.png?raw=true)

![](https://github.com/15523257452/slide-verification/blob/master/images/demo02.png?raw=true)