jquery点击按钮切换样式，jquery发送验证码

已于 2023-12-25 14:16:25 修改
阅读量263 收藏
点赞数
分类专栏： jquery 文章标签： jquery 前端 javascript
于 2023-10-07 23:55:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61869009/article/details/133659367
版权
这里拿登陆注册来做记录。功能点：点击切换不同样式对应不同代码，添加正则校验，发送手机验证码。最后有整个例子。

先写个简单的登陆注册样式。

接下来就是点击登陆注册下面对应的块也要对应的变化，我们要先拿到标题的class名添加点击事件，点击的时候再拿到下面的块进行show和hide就可以了。

    //点击切换不同的块
    $(".titflex .istit").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();
        $(".inpcont .items").eq(index).show().siblings().hide();
    })

然后在说这个input校验提示，因为原生没有vue配合element的验证那么方便，校验包括标签添加都需要自己手写，样式如下。

1.首先要给input定义id，方便拿到输入的值进行正则判断。

2.定义自己需要的提示标签。

3.input失去焦点触发校验，添加提示标签。

4.点击登录按钮也要对应添加提示标签。

最后搞一下发送验证码。

1.手机号校验通过，获取验证码按钮才可以点击。

2.封装计时器。

3.点击获取验证码开启倒计时，并且这个按钮不能再次点击。

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>登陆注册</title>
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
    input{
        border: 1px solid #eee;
    }
    button{
        border: none;
    }
    .content {
        width: 400px;
        margin: 100px auto;
        border: 1px solid #333;
        border-radius: 6px;
        padding: 10px 40px 30px;
        box-sizing: border-box;
    }

    .titflex {
        display: flex;
        font-size: 29px;
        width: 200px;
        margin: 10px auto 20px;
        justify-content: space-between;
        cursor: pointer;
    }

    .titflex .active {
        border-bottom: 2px solid red;
        padding-bottom: 10px;
        color: red;
    }

    .inpcont .items .inputs {
        margin: 30px auto;
        position: relative;
    }

    .inpcont .items .inputs input {
        width: 100%;
        height: 40px;
        border-radius: 8px;
        padding-left: 10px;
        display: block;
    }

    button {
        background-color: #666;
        margin: 40px auto 10px;
        width: 100%;
        height: 40px;
        display: block;
        border-radius: 6px;
        color: #fff;
        cursor: pointer;
    }

    .spants {
        color: red;
        font-size: 14px;
        position: absolute;
        top: 45px;
    }

    .inpflex {
        display: flex;
    }
</style>

<body>
    <div class="content">
        <div class="titflex">
            <div class="istit">登录</div>
            <div class="istit active">注册</div>
        </div>
        <div class="inpcont">
            <div class="items" style="display: none;">
                <div>
                    <form id="formLog">
                        <div class="inputs">
                            <input oninput="if(value.length>11)value=value.slice(0,11)" type="text" maxlength="11"
                                name="phone" id="phone" placeholder="请输入手机号">
                        </div>
                        <div class="inputs">
                            <input type="password" name="pwd" id="pwd" placeholder="请输入密码">
                        </div>
                    </form>
                </div>
                <button onclick="login()">点击登录</button>
            </div>
            <div class="items">
                <div>
                    <form id="formReg">
                        <div class="inputs">
                            <input oninput="if(value.length>11)value=value.slice(0,11)" type="text" maxlength="11"
                            name="phones" id="phones" placeholder="请输入手机号">
                        </div>
                        <div class="inputs inpflex">
                            <input type="text" name="code" id="code" placeholder="请输入验证码">
                            <input type="button" id="getcode" value="获取验证码">
                        </div>
                    </form>
                </div>
                <button onclick="register()">注册</button>
            </div>
        </div>
    </div>

</body>
<script>
    //点击切换不同的块
    $(".titflex .istit").click(function () {
        $(".spants").remove();
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();
        $(".inpcont .items").eq(index).show().siblings().hide();
    })
</script>
<script>
    //这里先把所有校验写上
    var emptyPhone = "<span class='spants'>手机号不能为空!</span>"
    var noPhone = "<span class='spants'>手机号格式不正确!</span>"
    var phonecode = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
    var pwd = "<span class='spants'>密码不能为空!</span>"
    var code = "<span class='spants'>验证码不能为空!</span>"
    //这里先做input失去焦点校验
    $("#phone").blur(function () {
        if (!$("#phone").val()) { //判定用户名非空
            $(".spants").remove();
            $("#phone").after(emptyPhone);
        } else if (!phonecode.test($("#phone").val())) {
            $(".spants").remove();
            $("#phone").after(noPhone);
        } else {
            $(".spants").remove();
        }
    });
    $('#pwd').blur(function () {
        if (!$("#pwd").val()) { //判定用户名非空
            $(".spants").remove();
            $("#pwd").after(pwd);
        } else {
            $(".spants").remove();
        }
    })
    //点击登录也需要判断 
    function login() {
        if (!$("#phone").val()) { //判定用户名非空
            $(".spants").remove();
            $("#phone").after(emptyPhone);
            return;
        }
        if (!phonecode.test($("#phone").val())) {
            $(".spants").remove();
            $("#phone").after(noPhone);
            return;
        }
        if (!$("#pwd").val()) {
            $(".spants").remove();
            $("#pwd").after(pwd);
            return;
        }
        let phone = $('#formLog').serializeArray()[0].value
        let pwd = $('#formLog').serializeArray()[1].value
        let formdata = {
            phone,
            pwd
        }
        console.log(formdata, '拿到输入框数据');
    }
</script>
<script>
    //倒计时
    var minth = 60; //秒数初始值
    var mytime;
    //封装一个倒计时方法
    function fn() {
        minth = --minth;
        if (minth > 0) { //还没有倒计时结束
            $("#getcode").val('(' + minth + '秒)后重发').attr("disabled", "disabled");
        } else { //倒计时结束
            $("#getcode").removeAttr("disabled");
            minth = 60; //重新初始化
            $("#getcode").val('重新发送');
            clearInterval(mytime); //清除定时函数
        }
    }
</script>
<script>
    $("#phones").blur(function () {
        if (!$("#phones").val()) { //判定用户名非空
            $(".spants").remove();
            $("#phones").after(emptyPhone);
        } else if (!phonecode.test($("#phones").val())) {
            $(".spants").remove();
            $("#phones").after(noPhone);
        } else {
            $(".spants").remove();
        }
    });
    $('#code').blur(function () {
        if (!$("#code").val()) { //判定用户名非空
            $(".spants").remove();
            $("#code").after(code);
        } else {
            $(".spants").remove();
        }
    })
    //点击发送验证码
    $('#getcode').click(function () {
        if (!$("#phones").val()) { //判定用户名非空
            $(".spants").remove();
            $("#phones").after(emptyPhone);
            return;
        }
        if (!phonecode.test($("#phones").val())) {
            $(".spants").remove();
            $("#phones").after(noPhone);
            return;
        }
        $("#getcode").attr("disabled", "disabled");
        mytime = setInterval(fn, 1000);
    })
    //点击注册
    function register() {
        if (!$("#phones").val()) { //判定用户名非空
            $(".spants").remove();
            $("#phones").after(emptyPhone);
            return;
        }
        if (!phonecode.test($("#phones").val())) {
            $(".spants").remove();
            $("#phones").after(noPhone);
            return;
        }
        if (!$("#code").val()) {
            $(".spants").remove();
            $("#code").after(code);
            return;
        }
        let phones = $('#formReg').serializeArray()[0].value
        let code = $('#formReg').serializeArray()[1].value
        let formdatas = {
            phones,
            code
        }
        console.log(formdatas, '拿到输入框数据');
    }
</script>

</html>

优雅格子衫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery实现发送验证码按钮
weixin_47164448的博客
02-04 407
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
jQuery手机号码获取验证码60秒倒计时表单代码
01-01
4. **AJAX**：当用户点击获取验证码按钮，jQuery使用AJAX异步技术向服务器发送请求。这样可以避免页面刷新，提高用户体验。 5. **60秒倒计时**：这是此功能的核心部分。倒计时是为了防止用户频繁发送验证码，减轻...
jquery 单选按钮点击切换
05-12
jquery 单选按钮点击切换
jq实现发送短信验证码
weixin_30778805的博客
10-17 186
前端的工作经常会涉及到短信验证的功能(注册或获取当前手机号信息),于是自己也写了一个,路过的小伙伴可以看一下 未点击状态 点击之后的状态 var timer=""; var nums=60; var validCode=true;//定义该变量是为了处理后面的重复点击事件 $("#getCode").on('click',function(){ ...
jquery点击按钮
HU452261426的博客
03-16 84
$("#btnExcel").click(); 转载于:https://www.cnblogs.com/Zpyboke/p/5283153.html
jquery点击按钮切换样式
weixin_58896221的博客
07-19 1430
area就表示当前所选的按钮对应的值，传值的修改可以修改html的value看个人项目要求。实现点击两个按钮的切换。
jquery实现的发送短信验证时间倒计时间隔表格表单特效源码.zip
11-07
5. **CSS样式控制**：为了让倒计时效果更直观，可能还会涉及到jQuery的CSS操作，如`$(selector).addClass()`和`$(selector).removeClass()`，用于切换按钮的禁用状态和样式，让用户知道当前是否可以发送验证码。...
JS+HTML5实现获取手机验证码倒计时按钮
12-08
接下来，我们使用JavaScript（这里使用了jQuery库）来处理按钮点击事件以及倒计时逻辑。当用户点击按钮时，我们添加类"on"，禁用按钮，并启动一个定时器，每秒减少时间，直到达到0。一旦时间归零，我们将清除定时器...
jquery可切换主题的注册表单.zip
07-05
此外，表单按钮的样式和行为也可能被jQuery优化，例如添加鼠标悬停效果、按钮点击反馈等。 “主题切换”功能是此注册表单的一大亮点。这可能涉及到CSS（层叠样式表）的使用，通过预设多种样式文件（如light.css、...
修改绑定手机号Tab切换样式时间线样式
06-01
标题"修改绑定手机号Tab切换样式时间线样式"提及的是一项关于优化网页中用户流程的操作，特别是涉及到手机号绑定这一常见功能的界面设计。描述中的"时间线形式切换修改绑定手机号，第一步第二步第三步"暗示了这是一...
jq实现验证码
10-12
jq 实现验证码
jQuery+CSS实现简单的显示切换功能，点击按钮切换样式显示
11-17
jQuery+CSS实现简单的显示切换功能，点击按钮切换样式显示 jQuery+CSS实现简单的显示切换功能，点击按钮切换样式显示
jquery 按钮切换插件
weixin_33676492的博客
09-20 212
样式： 点击第二个按钮，弹出回调函数。然后改变颜色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesh...
jquery点击切换在点击切换
anrong1547的博客
09-11 245
<div style=" position: absolute; top: 6rem; right: 4rem;" id="hides" > <a class="icon_a" style="color: #333; font-size: 16px;display: flex;"><span title=".icon32 .icon-col...
jquery 点击按钮切换样式on方法使用
支离破碎
05-19 4740
$('.teaching .tab a').on('click',function(){ $(this).siblings().removeClass('cur') $(this).addClass('cur'); trends.load(); })
jquery 页面，发送验证码，本页调用ajax
A9925的专栏
09-06 822
页面： echo empty($page_title) ? C('WEB_SITE_TITLE') : $page_title;
jq实现点击切换
hugejihu9的专栏
11-23 2583
文章来自：源码在线https://www.shengli.me/jquery/296.html   div样式为1，再点击一下按钮，div样式为2，再点击一下按钮，div样式为1。需要自定义jQuery方法toggle。   ...
jquery点击按钮改变样式
最新发布
07-27
要使用jQuery来点击按钮改变样式，可以按照以下步骤进行操作： 1. 在HTML文件中添加一个按钮和要改变样式的元素。例如： ```html 点击改变样式 要改变样式的元素 ``` 2. 在JavaScript文件或内联脚本中引入jQuery...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值