一段典型的登录注册页面验证码验证源码

0 47 2024-07-18 06:00:01

本文目录

1. html部分
2. js部分

一段典型的登录注册页面验证码验证源码，包含邮箱验证、发送验证码源码分享。

html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>注册</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>

<div class="card-container">
    <div class="tab">
        <ul>
            <li>
                <a href="user-register.html">注册</a>
            </li>
        </ul>
    </div>
    <div class="form">
        <form action="" method="POST" name="" >
            <label for="" class="email">
                <p><i>*</i>邮箱</p>
                <input type="text" placeholder="name@example.com" name="username" id="email">
            </label>
            <label for="" class="code">
                <p><i>*</i>验证码</p>
                <input type="text" placeholder="请输入邮箱验证码" name="code" id="code">
                <span class="send">发送</span>
            </label>
            <label for="" class="password">
                <p><i>*</i>密码</p>
                <input type="text" placeholder="至少6个字符" name="password" id="password">
            </label>
            <label for="" class="password">
                <p><i>*</i>确认密码</p>
                <input type="text" placeholder="再次输入密码" name="password" id="password">
            </label>
            <label for="" class=" submit-icons">
                <input class="submit-btn" type="submit" value="登录">
            </label>
            <div class="forget">
                <p>已有账号？ <a href="user-login.html">去登录</a></p>
            </div>
        </form>
    </div>
</div>
</body>
</html>

js部分

$(document).ready(function() {  
    $(".send").click(function() {  
        email = $("#email").val();
        if(!email){
            alert("邮箱地址不能为空");
            return;
        }
        if(!isValidEmail(email)){
            alert("邮箱格式错误");
            return;
        }
        if (!$(this).data('is-counting')) {  
            $(this).data('is-counting', true);
            var seconds = 60;
            var intervalId = setInterval(function() {  
                $(this).text(seconds + " 秒后重新发送");
                seconds--;  
  
                if (seconds <= 0) {  
                    clearInterval(intervalId);
                    $(this).text("重新发送");
                    $(this).data('is-counting', false);
                }  
            }.bind(this), 1000);
        }
    });  
});

function isValidEmail(email) {  
    var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
    return regex.test(email);  
}

这样，我们就完成了整个登录注册页的前端验证。

本文地址：https://xzo.com.cn/develop/js/1386.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

登录验证

验证码

php做登录验证的基本逻辑一个简单的登录与验证码php可跨域测试接口一段比较常用的登录页js验证 js原生6位验证码监听，输入一位后进入下一位帝国cms短信宝接口点击发送验证码没反应一段典型的登录注册页面验证码验证源码

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。