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

0 71 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网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

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

信息标签

登录验证

验证码

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

导出教程下载word版教程

关于JS/JQuery

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

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