JS实现原生注册表单，滑块验证，短信验证码

原创 已于 2024-11-05 15:03:20 修改 · 2.0k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #jQuery #前端 #阿里云 #滑块验证 #短信验证 #注册页面

于 2024-11-05 14:55:19 首次发布

 目录

一、编辑表单询盘结构

        1、确定注册接口所需参数

        2、编写表单HTML结构

二、编写style样式

        1、非表单元素样式

三、引入阿里云滑块验证

        1、引入阿里短信接口CDN

        2、实例化nc对象

四、调用短信验证码接口

        1、给获取按钮绑定点击事件

        2、测试短信验证码获取

五、调用注册接口

        1、引入jQuery

        2、设置防抖节流

        3、表单数据获取

        4、验证密码是否相同

        5、验证是否通过

        6、调用注册接口

六、小结

原生JS实现注册表单，滑块验证，短信验证码等。

一、编辑表单询盘结构

        1、确定注册接口所需参数

                本文中案例注册接口所需参数有：

参数key
电话（companyTelephone）companyTelephone
短信（smsCode）smsCode
密码（pwd）pwd
姓名（contactPerson）contactPerson
公司名称（companyName）companyName
邮箱（companyEmail）companyEmail
_appId（_appId）_appId

        2、编写表单HTML结构

                需要注意的是，如果在wordpress中使用这种自定义组件的询盘表单，使用css样式表的  方法添加样式可能会出现优先级不够从而导致与默认表单样式冲突的问题，在页面中部分样式会显示不全出现乱版，所以我此处将部分样式编写到了标签内用以提升样式优先级，避免被默认表单样式冲突掉。

                在对应的元素上添加了对应的id、name、class属性，以方便后面获取表单数据。

<!-- 表单 -->
<form id="rForm" style="width:500px;box-shadow: 0 10px 20px 10px #d8d7d7; padding: 25px 0;margin: 50px auto;border-radius: 20px;">
    <div class="row" style="text-align: center;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;">
        <div class="phone-header" style="width: 10%;height: 45px;background-color: #f9f9f9;border-top-left-radius: 20px;border-bottom-left-radius: 20px;line-height: 45px;border-right: 2px solid #ffffff;color: #858A96;font-size: 16px">+86</div>
        <input type="text" id="phone" name="companyTelephone" required class="customizeInquiry" placeholder="请输入您的手机号码(必填)" style="width: 50%;height: 45px;border-radius: 20px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;background-color: #f9f9f9;text-indent: 2em;border: none;">
    </div>

    <!-- 验证码滑块 -->
    <div id="nc" style="position: relative;width: 60%;margin: 20px auto;"></div>

    <div class="row" style="text-align: center;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;">
        <input type="text" id="yzm" name="smsCode" required class="customizeInquiry" placeholder="短信验证码" style="width: 40%;height: 45px;border-radius: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;background-color: #f9f9f9;text-indent: 2em;border: none;">
        <div class="getyzm" style="width: 20%;height: 45px;background-color: #f9f9f9;border-top-right-radius: 20px;border-bottom-right-radius: 20px;line-height: 45px;border-left: 2px solid #ffffff;transition: all 0.3s;cursor: pointer;margin-left: 1px;font-size: 16px;color:#858A96">获取验证码</div>
    </div>

    <div class="row" style="text-align: center;margin-bottom: 10px;">
        <input type="text" id="password" name="pwd" required class="customizeInquiry" placeholder="设置登录密码" style="width: 60%;height: 45px;background-color: #f9f9f9;text-indent: 2em;border-radius: 20px;border: none;">
    </div>

    <div class="row" style="text-align: center;margin-bottom: 10px;">
        <input type="text" id="repassword" name="repassword" required  placeholder="请再次输入登录密码" style="width: 60%;height: 45px;background-color: #f9f9f9;text-indent: 2em;border-radius: 20px;border: none;">
    </div>

    <div class="row" style="text-align: center;margin-bottom: 10px;">
        <input type="text" id="name" name="contactPerson" required class="customizeInquiry" placeholder="请输入您的姓名" style="width: 60%;height: 45px;background-color: #f9f9f9;text-indent: 2em;border-radius: 20px;border: none;">
    </div>

    <div class="row" style="text-align: center;margin-bottom: 10px;">
        <input type="text" id="company" name="companyName" required class="customizeInquiry" placeholder="请输入您的公司名称(必填)" style="width: 60%;height: 45px;background-color: #f9f9f9;text-indent: 2em;border-radius: 20px;border: none;">
    </div>

    <div class="row" style="text-align: center;margin-bottom: 10px;">
        <input type="text" id="email" name="companyEmail" required class="customizeInquiry" placeholder="请输入您的邮箱(必填)" style="width: 60%;height: 45px;background-color: #f9f9f9;text-indent: 2em;border-radius: 20px;border: none;">
    </div>

    <div class="tijiao" style="text-align: center;padding-top: 10px;">
        <input value="立即注册" id="customizeInquiryBtn" style="width: 60%;height: 45px;background-color: #ff7602;text-indent: 0;border-radius: 20px;border: none;color: #ffffff;cursor: pointer;transition: all 0.5s;text-align: center;">
    </div>

    <div class="login" style="text-align: center;padding-top: 10px;font-size: 16px;">
        已有账号？<a href="/login" style="text-decoration: none;color:#ff7602;">立即登录</a>
    </div>
<div class="back" style="text-align: center;font-size: 16px;">
        了解服务详情？<a href="/index" style="text-decoration: none;color:#4095e5;">返回官网</a>
    </div>
</form>

二、编写style样式

        1、非表单元素样式

                这里写的是表单中非input等元素的自定义块样式，例如短信验证码获取按钮，激活后样式，电话头部等样式。

 /* 询盘 */

    #rform{
        padding: 25px 0;
        margin: 0;
    }
    #rform .row {
        text-align: center;
        margin-bottom: 10px;
    }
    .phone-header{
        width: 10%;
        height: 45px;
        background-color: #f9f9f9;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        line-height: 45px;
        border-right: 2px solid #ffffff;
    }
    .getyzm{
        width: 20%;
        height: 45px;
        background-color: #f9f9f9;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        line-height: 45px;
        border-left: 2px solid #ffffff;
        transition: all 0.3s;
        cursor: pointer;
        margin-left: 1px;
        pointer-events: none;
        cursor: default;
    }
    .getyzmok{
        color: #000000 !important;
        pointer-events: visible;
    }
    .getyzm:hover{
        background-color: #ff7602 !important;
        color: #ffffff !important;
        font-size: 16px;
    }
    #rform input {
        width: 60%;
        height: 45px;
        border-radius: 20px;
        border: none;
        background-color: #f9f9f9;
        text-indent: 2em;
    }
    #rform input:focus{
        outline: 1px solid #ff7602;
    }
    #rform .tijiao{
        text-align: center;
        padding-top: 10px;
    }
    #rform .tijiao input{
        text-indent: 0;
        background-color: #ff7602;
        cursor: pointer;
        color: #ffffff;
        transition: all 0.5s;
    }
    #rform .tijiao input:hover{
        background-color: #ff7602c4;
    }
    



    @media screen and (max-width:768px) {
        .getyzm{
            font-size: 12px !important;
        }
    }

        完成HTML和CSS后的页面样式预览： 

三、引入阿里云滑块验证

         参考文档：如何集成滑动验证的前端页面代码_验证码(Captcha)-阿里云帮助中心

        1、引入阿里短信接口CDN

<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

        2、实例化nc对象

                在实例化nc之前先声明几个后面调用短信验证码接口时会用到的变量，参数在滑块验证成功后会返回，并将返回的参数放到对应的声明变量中，同时给获取验证码按钮添加激活类，回复按钮可点击状态，本例中短信接口所需参数为：

参数key
手机号

phoneNumber

会话ID

sessionId
类型type

签名串

sig

请求唯一标识

token

        实例化中nc的对应appkey需要在阿里云后台控制台获取，请输入对应的参数，否则会验证失败。 

        let phoneNumberV = '';
        let sessionIdV = '';
        let sigV = '';
        let tokenV = '';

        let ncInstance;
        // 实例化nc
        AWSC.use("nc", function (state, module) {
        // 初始化
        ncInstance = module.init({
            // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
            appkey: "XXXXXXXXXXXXXXXXXXXX",
            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
            scene: "nc_register",
            // 声明滑动验证需要渲染的目标ID。
            renderTo: "nc",
            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
            success: function (data) {
                phoneNumberV = document.getElementById('phone').value; // 获取手机号
                    sessionIdV = data.sessionId;
                    tokenV = data.token;
                    sigV = data.sig;

                const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.add('getyzmok');

            },
            // 滑动验证失败时触发该回调参数。
            fail: function (failCode) {
                 window.console && console.log(failCode)
            },
            // 验证码加载出现异常时触发该回调参数。
            error: function (errorCode) {
                 window.console && console.log(errorCode)
            }
        });
    });

         滑块验证成功反馈：

四、调用短信验证码接口

        短信验证码流程图（图源阿里云），不过我们这里最后拿到验证码后调用的是注册接口，原理相通。

        1、给获取按钮绑定点击事件

                给获取验证码按钮绑定点击事件，点击后移除按钮的激活类，恢复到不可点击状态，判断滑块验证是否成功，如果是已经成功的重置滑块状态。创建FormData对象，将上面滑块验证成功后回调给的对应参数添加到对象中用以调用短信接口。

    document.addEventListener('DOMContentLoaded', function() {
        // 点击获取验证码按钮
        document.querySelector('.getyzm').addEventListener('click', function() {

                const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.remove('getyzmok');
                if (ncInstance) {
                    ncInstance.reset(); // 触发滑块验证
                }
                
                        // 创建 FormData 对象
                const formData = new FormData();
                formData.append('mobile', phoneNumberV);
                formData.append('type', 1);
                formData.append('sessionId', sessionIdV);
                formData.append('sig', sigV);
                formData.append('token', tokenV);
                // 发送 POST 请求到指定接口
                fetch('https://example.net/send', { 
                    method: 'POST',
                    body:formData
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Response:', data);
                    alert(data.message)
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error.message)
                });
        });
    })

        2、测试短信验证码获取

                因为这里我的手机号已经注册过了，所以接口返回已被注册，同时也说明接口获取的滑块回调参数是正确的，接口正常调用了。如果是未注册的手机号，这里应该会弹出success发送成功，同时手机上收到短信验证码smsCode。

五、调用注册接口

        1、引入jQuery

                引入jQuery，方便获取表单中的各项数据和发起请求。

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>

        2、设置防抖节流

                设置变量isSubmitting 判断是否提交，如果为true则是已经提交，提示请勿重复提交，如果为false可以继续执行。

    $(document).ready(function() {
        let isSubmitting = false; // Track submission state

        $('#customizeInquiryBtn').on('click', function(event) {
                event.preventDefault(); // 防止表单的默认提交行为

            // Check if already submitting
            if (isSubmitting) {
                alert('请勿重复提交');
                return;
            }
            isSubmitting = true;
    )}
)}

        3、表单数据获取

                定义变量isValid判断是否符合提交规则，使用jQuery根据class获取表单中各项数据放入inputs，定义变量enquiryContent存放表单数据，定义agreementCheckbox判断是否勾选复选框（如果有的话，本例中没有该选项，但不影响），对inputs进行遍历查看是否为空，对于非空的数据存储在enquiryContent中，当有空的选项时进行提示，当遍历完成后切都不为空时拿到所有选项数据并存储在enquiryContent中，此时isValid为true，否则isValid为false。

    $(document).ready(function() {
        let isSubmitting = false; // Track submission state

        $('#customizeInquiryBtn').on('click', function(event) {
                event.preventDefault(); // 防止表单的默认提交行为

            // Check if already submitting
            if (isSubmitting) {
                alert('请勿重复提交');
                return;
            }
            isSubmitting = true; // Set to true to prevent further submissions

            // 获取非hidden的输入框的数据
            let isValid = true;
            const inputs = $('.customizeInquiry');
            const enquiryContent = {};
             // 通过ID获取checkbox元素  
            var agreementCheckbox = document.getElementById('agreement');  

            // 循环查看是否表单为空
            inputs.each(function() {
                const value = $(this).val();
                const name = $(this).attr('name'); 
                // console.log($(this).context.id);

                if ($(this).attr('type') === 'checkbox') {
                    // 处理checkbox
                    if ($(this).is(':checked')) {
                        if (!enquiryContent[name]) {
                            enquiryContent[name] = [];
                        }
                        enquiryContent[name].push($(this).attr('id'));
                    }
                } else {
                    if (!value) {
                        $(this).siblings('.empty-tip').show();
                        isValid = false;
                    } else {
                        $(this).siblings('.empty-tip').hide();
                        enquiryContent[name] = value;
                    }
                }
            });
        });
    });

        4、验证密码是否相同

                使用jQuery根据id拿到输入框中的密码和重复密码的value值，进行判断是否相同，不同则isValid返回false，并进行提示。

    $(document).ready(function() {
        let isSubmitting = false; // Track submission state

        $('#customizeInquiryBtn').on('click', function(event) {
                event.preventDefault(); // 防止表单的默认提交行为

            // Check if already submitting
            if (isSubmitting) {
                alert('请勿重复提交');
                return;
            }
            isSubmitting = true; // Set to true to prevent further submissions

            // 获取非hidden的输入框的数据
            let isValid = true;
            const inputs = $('.customizeInquiry');
            const enquiryContent = {};
             // 通过ID获取checkbox元素  
            var agreementCheckbox = document.getElementById('agreement');  

            // 循环查看是否表单为空
            inputs.each(function() {
                const value = $(this).val();
                const name = $(this).attr('name'); 
                // console.log($(this).context.id);

                if ($(this).attr('type') === 'checkbox') {
                    // 处理checkbox
                    if ($(this).is(':checked')) {
                        if (!enquiryContent[name]) {
                            enquiryContent[name] = [];
                        }
                        enquiryContent[name].push($(this).attr('id'));
                    }
                } else {
                    if (!value) {
                        $(this).siblings('.empty-tip').show();
                        isValid = false;
                    } else {
                        $(this).siblings('.empty-tip').hide();
                        enquiryContent[name] = value;
                    }
                }
            });


            // 检查密码和确认密码是否匹配
            const password = $('#password').val();
            const repassword = $('#repassword').val();
            if (password !== repassword) {
                alert('密码和确认密码不相同，请确认密码一致!');
                isValid = false;
            }
       });
  });

        5、验证是否通过

                验证isValid的值，为true则进行表单数据处理，否则提示错误。

    $(document).ready(function() {
        let isSubmitting = false; // Track submission state

        $('#customizeInquiryBtn').on('click', function(event) {
                event.preventDefault(); // 防止表单的默认提交行为

            // Check if already submitting
            if (isSubmitting) {
                alert('请勿重复提交');
                return;
            }
            isSubmitting = true; // Set to true to prevent further submissions

            // 获取非hidden的输入框的数据
            let isValid = true;
            const inputs = $('.customizeInquiry');
            const enquiryContent = {};
             // 通过ID获取checkbox元素  
            var agreementCheckbox = document.getElementById('agreement');  

            // 循环查看是否表单为空
            inputs.each(function() {
                const value = $(this).val();
                const name = $(this).attr('name'); 
                // console.log($(this).context.id);

                if ($(this).attr('type') === 'checkbox') {
                    // 处理checkbox
                    if ($(this).is(':checked')) {
                        if (!enquiryContent[name]) {
                            enquiryContent[name] = [];
                        }
                        enquiryContent[name].push($(this).attr('id'));
                    }
                } else {
                    if (!value) {
                        $(this).siblings('.empty-tip').show();
                        isValid = false;
                    } else {
                        $(this).siblings('.empty-tip').hide();
                        enquiryContent[name] = value;
                    }
                }
            });


            // 检查密码和确认密码是否匹配
            const password = $('#password').val();
            const repassword = $('#repassword').val();
            if (password !== repassword) {
                alert('密码和确认密码不相同，请确认密码一致!');
                isValid = false;
            }

            // 验证是否通过
            if (isValid) {
                //  console.log(enquiryContent)

                // 对表单结果进行处理
                // console.log(JSON.stringify(enquiryContent));

            } else {
                alert("请完善表单!")
            }
       });
  });

        6、调用注册接口

                当isValid为true时，对表单数据进行处理，创建DormData对象，将表单中的值赋值给对应参数，最终拿到formData2，调用注册接口携带formData2参数发起POST请求，请求成功后设置定时器0.1秒后跳转登录地址，并设置定时器在3秒后重置isSubmitting参数为false，控制在发起请求3秒内不能再次提交请求。

    $(document).ready(function() {
        let isSubmitting = false; // Track submission state

        $('#customizeInquiryBtn').on('click', function(event) {
                event.preventDefault(); // 防止表单的默认提交行为

            // Check if already submitting
            if (isSubmitting) {
                alert('请勿重复提交');
                return;
            }
            isSubmitting = true; // Set to true to prevent further submissions

            // 获取非hidden的输入框的数据
            let isValid = true;
            const inputs = $('.customizeInquiry');
            const enquiryContent = {};
             // 通过ID获取checkbox元素  
            var agreementCheckbox = document.getElementById('agreement');  

            // 循环查看是否表单为空
            inputs.each(function() {
                const value = $(this).val();
                const name = $(this).attr('name'); 
                // console.log($(this).context.id);

                if ($(this).attr('type') === 'checkbox') {
                    // 处理checkbox
                    if ($(this).is(':checked')) {
                        if (!enquiryContent[name]) {
                            enquiryContent[name] = [];
                        }
                        enquiryContent[name].push($(this).attr('id'));
                    }
                } else {
                    if (!value) {
                        $(this).siblings('.empty-tip').show();
                        isValid = false;
                    } else {
                        $(this).siblings('.empty-tip').hide();
                        enquiryContent[name] = value;
                    }
                }
            });


            // 检查密码和确认密码是否匹配
            const password = $('#password').val();
            const repassword = $('#repassword').val();
            if (password !== repassword) {
                alert('密码和确认密码不相同，请确认密码一致!');
                isValid = false;
            }

            // 验证是否通过
            if (isValid) {
                //  console.log(enquiryContent.companyTelephone)

                    // 对表单结果进行处理
                    // console.log(JSON.stringify(enquiryContent));


                     // 创建 FormData 对象
            const formData2 = new FormData();
                formData2.append('companyTelephone', enquiryContent.companyTelephone);
                formData2.append('smsCode', enquiryContent.smsCode);
                formData2.append('pwd', enquiryContent.pwd);
                formData2.append('contactPerson', enquiryContent.contactPerson);
                formData2.append('companyName', enquiryContent.companyName);
                formData2.append('companyEmail', enquiryContent.companyEmail);
                formData2.append('_appId', 8);


            // 发送 POST 请求到指定接口
                fetch('https://example.net/register', { 
                    method: 'POST',
                    body:formData2
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Response:', data);
                    alert(data.message);
                    if(data.message == 'success'){
                        // alert('注册成功!');
                        window._agl && window._agl.push(['track', ['success', {t: 3}]])
                        setTimeout(function(){
                            window.location.href = '/login';
                        },100)
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error.message)
                })
                .finally(() => {
                    // Reset isSubmitting after 3 seconds
                    setTimeout(() => {
                        isSubmitting = false;
                    }, 3000);
                });

            } else {
                alert("请完善表单!")
            }
                    
        });
    });

六、小结

        注意替换接口地址为真实接口地址。

        在一些时候可能会用到注册渠道追踪，可以在isValid验证通过后添加参数source（根据后端接口情况，此处默认source）提交给接口。先获取当前页面地址参数queryParamsValue，再通过get方法获取参数数据（可以是多个，一起拼接为一个参数就行，此处举例使用了两个参数，source和keyword），并将参数source添加入formData2一并发送给注册接口，从而在后端接收注册渠道信息。

// 获取页面来源
const queryParamsValue = new URLSearchParams(window.location.search);
const sourceValue= queryParamsValue.get('source'); 
const keywordValue = queryParamsValue.get('keyword'); 
const source = ('注册来源是：' + sourceValue + ',关键词是：' + keywordValue)

 示例：

当前注册页面地址：https://example.net/register?source=baidu&keyword=凉风听雪

获取注册渠道来源source：

【python】python中如何通过ddddocr来识别验证码，突破滑块移动验证
景天科技苑
08-14 2万+
ddddocr 是一个基于 Python 的开源 OCR（Optical Character Recognition，光学字符识别）库，它特别适用于验证码识别，支持英文数字、滑块和中文点选验证码等多种类型。ddddocr 基于深度学习技术，具有较高的识别准确率和灵活性。本文将详细介绍 ddddocr 的安装、基本用法以及结合实际案例进行验证码识别的过程。
js逆向验证码篇之某程（滑块验证码）
博客
04-19 1693
提示！本文章仅供学习交流，严禁用于任何商业和非法用途，如有侵权，可联系本文作者删除
JavaScript的滑块验证码插件
10-19
js写的滑块验证码,下载解压后可以直接嵌入到项目中使用
verify.js滑块验证
12-29
用于登录等其他形式的向右滑动滑块验证的JavaScript代码
阿里云人机验证之无痕验证集成
tm7796的专栏
01-12 2887
阿里云的官方文档：https://help.aliyun.com/document_detail/122071.html?spm=a2c4g.11186623.6.565.40d726afynSQtu 官方提供了demo，我在这里直接写一下我的集成 首先引入阿里云js <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script> 前端是jsp页面，部分代码如下 <!-- 验证 -->
【JS】滑动验证实现
weixin_56286359的博客
03-21 2824
基于 Javascript 实现动态滑动验证效果
JS 简单实现滑块验证码
web全栈开发的博客
04-24 1411
监听的事件回调处理。如果能帮助到大家深感欣慰！代码拙劣，大神勿笑[抱拳][抱拳][抱拳]图片是由操作像素点绘制的，直接生成了两张图片，一个是。去处理图片的，反而用像素的话感觉可操作性更高。废话开篇：拖动底部滑块，实现滑块验证码功能。的形状也可以自定义，因此并没有用。事件进行了监听，只有当。
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
12-17
为了实现拖动滑块验证，JavaScript文件（tn_code.js）将处理用户的交互，监听滑块移动事件，并在用户释放滑块时发送请求到服务器验证。 总的来说，这种PHP+JS实现的拖动滑块验证码验证系统结合了前端与后端的技术，...
php+js实现极验，拖动滑块验证码验证表单.docx
11-24
PHP+JS 实现极验，拖动滑块验证码验证表单 在当前的网站登录验证中，传统的验证码方式已经不能满足用户的需求，极验拖动滑块验证码的出现为用户提供了一种更好的体验方式。这种方式不仅可以减少用户输入的错误，也...
按住滑块 拖拽验证html5,【原生】JavaScript 实现滑动拖动验证
weixin_39884100的博客
06-21 1867
通常，我们为了防止用户恶意提交表单，会让用户在提交前完成滑动拖动验证，有时候这也能起到一丝反爬的作用。实现滑动验证的方式当然不止一种，这里我们直接使用原生 JavaScript 来实现。现在，你可以在 这里 看到完整的源码，欢迎 Star 哦????。原生实现原生 JavaScript 的实现，主要是通过监听鼠标事件来对 DOM 进行一系列的操作。滑块验证的结构主要分为四个部分：轨道、滑块、背景和文案，...
基于jQuery的滑块验证注册功能实现
jQuery注册滑块验证效果是一种常见的前端交互式表单验证技术，主要用于提升用户注册或登录过程中的安全性与用户体验。该技术结合了HTML、CSS和JavaScript（特别是jQuery库）来实现一个直观、可拖动的滑块控件，用户...
JS登录注册表单滑块验证码代码.zip
07-05
JS登录注册表单滑块验证码代码是一款支持登录和注册表单切换验证代码。
jQuery 基于slidercaptcha.js滑块式验证码插件支持移动端.rar
04-03
这是一款支持移动端的jQuery滑块式验证码插件。用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证
纯JS打造的滑块拼图验证
06-14
良心制作，只为分享，下载了某人的资源，还很高分，结果不是缺这个就是缺那个，不能用，浪费了好多分，鄙视。此资源为纯JS制作，本人已经根据自己项目实际进行了改动，您下载之后，请根据自己项目需求自行调整
纯JS实现滑块验证
09-21
纯JS实现滑块验证；打开页面即可使用；查看源码可复制到自己项目中。自带样式，可自修改。
js执行滑块验证码
hu827250322的博客
04-27 1095
滑块验证码 function slide (id) { var slider = document.getElementById(id), // 获取滑块 container = slider.parentNode; // 获取滑块的父类 console.log(slider); // <span id="nc_1_n1z" class="nc_iconfont btn_slide"></span> var rec
怎样通过SpringMVC生成图片验证码？
qq_44865266的博客
09-08 564
生成图片验证码 首先要添加一个jar包。 “kaptcha-2.3.2.jar”是一个java开源的验证码工具包，kaptcha 是一个非常实用的验证码生成工具。有了它，你可以生成各种样式的验证码，因为它是可配置的。kaptcha工作的原理是调用com.google.code.kaptcha.servlet.KaptchaServlet，生成一个图片。同时将生成的验证码字符串放到 HttpSession中。） kaptcha-2.3.2.jar下载 Springmvc-servlet.xml 添加配置，创
js逆向案例四-滑块验证码
十一姐的博客
08-27 6800
目录前、案例一二三四、验证码的逆向（⭐⭐⭐）1、案例11_滑块验证码2、案例插曲_滑块验证码识别两种方法（1）滑块缺口颜色为单一颜色时用rgb判断（2）滑块缺口颜色非单一值用模板匹配 前、案例一二三 js逆向案例一 js逆向案例二 四、验证码的逆向（⭐⭐⭐） 1、案例11_滑块验证码 （1）案例网址：点击网址 （2）案例反爬点：验证码缺口的识别，以及识别偏移量的js加密，cookie反爬 （3）案例分析：cookie只需要首次请求时把set-cookie拿到即可，slidevalue是滑块缺口加密
JavaScript 实现滑块验证码破解
最新发布
rrrrroottttttt的博客
05-28 889
在这篇文章中，我们将使用 JavaScript 来实现滑块验证码的破解。滑块验证码是一种常见的反自动化机制，通过要求用户拖动滑块来匹配缺口的位置，以此验证用户的真实性。通过对比这些变化，我们可以找到关键的参数并进行必要的处理。接下来，我们需要处理这些图片并识别滑块需要移动的位置。识别到滑块需要移动的距离后，我们需要生成一个滑动轨迹，模拟人类的滑动行为。首先，我们需要通过发送 HTTP 请求获取滑块验证码的背景图和滑块图。最后，我们需要将生成的滑动轨迹提交给服务器进行验证。更多内容联系1436423940。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值