AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

最万能的登录、注册页。带输入数据的验证。邮箱的正则表达式、正则表达式验证输入的数据

2024-08-14 332
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章提供了一个带有输入数据验证功能的万能登录和注册页面的HTML和JavaScript代码示例，包括正则表达式验证邮箱和用户输入数据。

看别人写的、不是缺胳膊就是少腿。就离谱、因为看不惯别人写的、所以自己写。界面美化可以按照自己的需求自己设计、这里只是提供了简单的前台数据获取以及输入数据的验证、哈哈哈哈哈哈

登录

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--      引入js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>欢迎登录图书管理系统</title>
</head>

<body style="background-color: aliceblue">

<div class="container" style=" width:1200px;margin-left:550px;margin-top: 150px" >

    <div class="row clearfix" style="align-content: center">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>欢迎登录图书管理系统</small>
                </h1>
            </div>
        </div>
    </div>


            <form th:action="@{/login}">

                <div class="form-group">
                    <div class="row" >
                        <div class="col-md-1"><label for="usercount">用户账号 :</label></div>
                        <div class="col-md-3">  <input type="text" placeholder="请输入账号" onblur="return checkCount()" class="form-control" name="username" id="usercount" ></div>
                        <div class="col-md-2"> <span id="tipCount" style="color: red"></span></div>
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-1"><label for="pwd">用户密码 :</label></div>
                        <div class="col-md-3">  <input type="text" placeholder="请输入密码" onblur="return checkPwd()" class="form-control" name="password" id="pwd" ></div>
                        <div class="col-md-3"> <span id="tipPwd"  style="color: red"></span></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-1">
                        <button type="submit" class="btn btn-default" onclick="return checkform()" >登录</button>
                    </div>
                    <div class="col-md-1">
                        <a class="btn btn-default" th:href="@{/register}" >注册</a>
                    </div>
                    <div class="col-md-1">
                        <a class="btn btn-default" th:href="@{/hello}" >首页</a>
                    </div>
                </div>


            </form>






</div>

<script type="text/javascript">
    var patt1 = /^[0-9]+.?[0-9]*$/;//正则表达式验证是否为纯数字


    //一级验证账号
    function checkCount(){
        var usercount =$("#usercount").val();

        if (usercount == null || usercount == ''){
            $("#tipCount").text("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            $("#tipCount").text("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            $("#tipCount").text("账号长度1-8");
            return  false;
        }else {
            $("#tipCount").text(" ")
        }

    }

    //一级验证姓名
    function checkPwd(){
        var pwd  =$("#pwd").val();
        if (pwd == null || pwd == ''){
            $("#tipPwd").text("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >6){
            $("#tipPwd").text("密码4长度1-6!!!");
            return false;
        }else {
            $("#tipPwd").text(" ");
        }

    }

    //二级验证
    function checkform(){
        var usercount =$("#usercount").val();
        var pwd  =$("#pwd").val();

        if (usercount == null || usercount == ''){
            alert("账号不能为空，请输入账号");
            return false;
        }

        if (pwd == null || pwd == ''){
            alert("密码不能为空!!!");
            return false;
        }




    }

</script>
</body>
</html>

在这里插入图片描述

注册页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--      引入js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>用户注册</title>
</head>

<body style="background-color: aliceblue">


<div class="container" style="margin-left: 550px;width: 1200px;height: 1000px" >

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>欢迎新用户注册</small>
                </h1>
            </div>
        </div>
    </div>

    <form th:action="@{/register}" >

        <div class="form-group">
            <div class="row">
                <div class="col-md-1" ><label for="usercount" >账号 :</label> </div>
                <div class="col-md-3"> <input type="text" placeholder="请输入账号" onblur="return checkCount()"   class="form-control col-md-6 " name="usercount" id="usercount"></div>
                <div class="col-md-2"> <span id="tipCount" style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="name">姓名 :</label></div>
                <div class="col-md-3">  <input type="text" placeholder="请输入姓名" onblur="return checkName()" class="form-control" name="name" id="name" ></div>
                <div class="col-md-3"> <span id="tipName"  style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="pwd">密码 :</label></div>
                <div class="col-md-3">  <input type="text" placeholder="请输入密码" onblur="return checkPwd()" class="form-control" name="pwd" id="pwd" ></div>
                <div class="col-md-3"> <span id="tipPwd"  style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="pwdpre">密码确认 :</label></div>
                <div class="col-md-3">  <input type="text" placeholder="请再次输入密码" onblur="return checkPwdpre()" class="form-control" name="pwd" id="pwdpre" ></div>
                <div class="col-md-3"> <span id="tipPwdpre"  style="color: red"></span></div>
            </div>
        </div>


        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="sex">性别 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="请输入性别" onblur="return checkSex()"  class="form-control" name="sex" id="sex" ></div>
                <div class="col-md-3"> <span id="tipSex"  style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"> <label for="age">年龄:</label></div>
                <div class="col-md-3"><input name="age" placeholder="请输入年龄" onblur="return checkAge()" class="form-control"  id="age"></input></div>
                <div class="col-md-3"> <span id="tipAge"  style="color: red"></span></div>
            </div>
        </div>


        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="email">邮箱 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="请输入邮箱" onblur="return checkEmail()" class="form-control" name="email" id="email" ></div>
                <div class="col-md-3"> <span id="tipEmail" style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="tel">电话 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="亲输入电话" onblur="return checkTel()"  class="form-control" name="tel" id="tel" ></div>
                <div class="col-md-3"> <span id="tipTel" style="color: red"></span></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-1"><label for="address">家庭地址 :</label></div>
                <div class="col-md-3"> <input type="text" placeholder="请输入地址" onblur="return checkAddress()" class="form-control" name="address" id="address" ></div>
                <div class="col-md-4"> <span id="tipAddress" style="color: red"></span></div>
            </div>
        </div>



        <div class="form-group">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-1"> <button type="submit" class="btn btn-default form-control" onclick="return checkform()" >注册</button></div>
                <div class="col-md-1"> <a class="btn btn-default form-control" th:href="@{/toLogin}" >登录</a></div>
                <div class="col-md-1">
                    <a class="btn btn-default" th:href="@{/hello}" >首页</a>
                </div>
            </div>
        </div>


    </form>

</div>



<script type="text/javascript">
    var patt1 = /^[0-9]+.?[0-9]*$/;//正则表达式验证是否为纯数字


    //一级验证账号
    function checkCount(){
        var usercount =$("#usercount").val();

        if (usercount == null || usercount == ''){
            $("#tipCount").text("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            $("#tipCount").text("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            $("#tipCount").text("账号长度1-8");
            return  false;
        }else {
            $("#tipCount").text(" ")
        }

    }

    //一级验证姓名
    function checkName(){
        var name  =$("#name").val();
        if (name == null || name == ''){
            $("#tipName").text("姓名不能为空!!!");
            return false;
        }else if (name.match(patt1)!=null){
            $("#tipName").text("姓名不能纯数字!!!");
            return false;
        }else if (name.length<1 || name.length >6){
            $("#tipName").text("姓名长度1-6!!!");
            return false;
        }else {
            $("#tipName").text(" ");
        }

    }

    //一级验证密码
    function checkPwd(){
        var pwd  =$("#pwd").val();
        if (pwd == null || pwd == ''){
            $("#tipPwd").text("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >8){
            $("#tipPwd").text("密码长度1-8!!!");
            return false;
        }else {
            $("#tipPwd").text(" ");
        }

    }
    //一级验证两次输入的密码是否一致
    function checkPwdpre() {
        var pwd = $("#pwd").val();
        var pwdpre =$("#pwdpre").val();
        if (pwdpre == null || pwdpre == ''){
            $("#tipPwdpre").text("密码不能为空!!!");
            return false;
        }else if(pwd != pwdpre){
            $("#tipPwdpre").text("两次输入的密码不一致!!!");
            return false;
        }else{
            $("#tipPwdpre").text(" ");
        }

    }



    //一级验证性别
    function checkSex(){
        var sex=$("#sex").val();

        if (sex == null || sex == ''){
            $("#tipSex").text("性别不能为空!!!");
            return false;
        }else if (sex === '男'||sex === '女'){
            $("#tipSex").text("");
        }else{
            $("#tipSex").text("请输入正确的性别：男 / 女");
        }
    }




    //一级验证年龄
    function checkAge(){
        var age=$("#age").val();
        if(age == null || age == ''){
            $("#tipAge").text("输入的年龄不能为空！！！");
            return false;
        }else if (age.match(patt1)==null){
            $("#tipAge").text("输入的年龄不合法！！！");
            return  false;
        }else if (age <0 || age > 150){
            $("#tipAge").text("请输入合法的年龄：0-150岁！！！");
            return false;
        }else{
            $("#tipAge").text(" ");

        }


    }
    //一级验证邮箱
    function checkEmail(){
        var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        var email =$("#email").val();
        if (email == null || email == ''){
            $("#tipEmail").text("输入的邮箱为空！！！");
            return false;
        }else if (email.match(re) == null){
            $("#tipEmail").text("请输入合法的邮箱：例如（zha@qq.com)");
            return false;
        }else{
            $("#tipEmail").text(" ");
        }

    }

    //一级验证手机号
    function checkTel(){
        var re = /^1\d{10}$/;
        var tel= $("#tel").val();
        if (tel == null || tel ==''){
            $("#tipTel").text("输入的手机号为空！！！");
            return false;
        }else if (tel.match(re) == null){
            $("#tipTel").text("输入的手机号不合法！！！");
            return false;
        }else{
            $("#tipTel").text(" ");
        }

    }


    //一级验证地址
    function checkAddress(){
        var address=$("#address").val();
        var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

        if (address == null || address ==''){
            $("#tipAddress").text("家庭地址不能为空！！！");
            return false;
        }else if (address.match(patt1) != null){
            $("#tipAddress").text("家庭地址不能为纯数字，请输入正确的家庭地址");
            return false;
        }else{
            $("#tipAddress").text(" ");
        }

    }




    //二级验证
    function checkform(){

        var re = /^1\d{10}$/;
        var re1 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        var pwd =$("#pwd").val();
        var pwdpre =$("#pwdpre").val();
        var usercount =$("#usercount").val();
        var name  =$("#name").val();
        var sex=$("#sex").val();
        var age=$("#age").val();
        var email =$("#email").val();
        var tel= $("#tel").val();
        var address=$("#address").val();

        if (usercount == null || usercount == ''){
            alert("账号不能为空");
            return false;
        }else if (usercount.match(patt1)!=null){
            alert("账号不能为纯数字");
            return  false;
        }else if (usercount.length <1 ||usercount.length >8){
            alert("账号长度1-8");
            return  false;
        }

        if (name == null || name == ''){
            alert("姓名不能为空!!!");
            return false;
        }else if (name.match(patt1)!=null){
            alert("姓名不能纯数字!!!");
            return false;
        }else if (name.length<1 || name.length >6){
            alert("姓名长度1-6!!!");
            return false;
        }

        if (pwd == null || pwd == ''){
            alert("密码不能为空!!!");
            return false;
        }else if (pwd.length<1 || pwd.length >8){
            alert("密码长度1-8!!!");
            return false;
        }

        if (pwdpre == null || pwdpre == ''){
            alert("密码不能为空!!!");
            return false;
        }else if (pwdpre.length<1 || pwdpre.length >8){
            alert("密码长度1-8!!!");
            return false;
        }

        if (sex == null || sex == ''){
            alert("性别不能为空!!!");
            return false;
        }else if (sex === '男'||sex === '女'){

        }else{
            alert("请输入正确的性别：男 / 女");
            return  false;
        }

        if(age == null || age == ''){
            alert("输入的年龄不能为空！！！");
            return false;
        }else if (age.match(patt1)==null){
            alert("输入的年龄不合法！！！");
            return  false;
        }else if (age <0 || age > 150){
            alert("请输入合法的年龄：0-150岁！！！");
            return false;
        }

        if (email == null || email == ''){
            alert("输入的邮箱为空！！！");
            return false;
        }else if (email.match(re1) == null){
            alert("请输入合法的邮箱：例如（zha@qq.com)");
            return false;
        }

        if (tel == null || tel ==''){
            alert("输入的手机号为空！！！");
            return false;
        }else if (tel.match(re) == null){
            alert("输入的手机号不合法！！！");
            return false;
        }

        if (address == null || address ==''){
            alert("家庭地址不能为空！！！");
            return false;
        }else if (address.match(patt1) != null){
            alert("家庭地址不能为纯数字，请输入正确的家庭地址");
            return false;
        }



    }
</script>



</body>
</html>

在这里插入图片描述

文章标签：
JavaScript
前端开发
热爱技术的小郑
目录
相关文章
A等天晴
|
存储 前端开发 PHP
构建一个简单的网站，包括用户注册、登录功能
构建一个简单的网站，包括用户注册、登录功能
A等天晴
1501 1
翟天保Steven
|
JSON 开发工具 C++
Windows下用CMake编译JsonCpp及配置（适合新手）
Windows下用CMake编译JsonCpp及配置（适合新手）
翟天保Steven
1768 1
小鲸云
|
5月前
|
人工智能 机器人 API
2026年新手阿里云上及本地部署OpenClaw（Clawdbot）+企业微信集成保姆级教程
在数字化办公普及的2026年，OpenClaw（原Clawdbot）作为开源AI自动化助手框架，凭借“自然语言驱动操作”的核心优势，成为企业降本增效的关键工具。它可替代人工完成文件处理、消息推送、流程审批等重复性工作，更能与企业微信深度集成，实现办公消息统一管控、AI指令随时随地触发，完美适配企业日常办公场景。
小鲸云
1960 2
李淇
|
4月前
|
人工智能 数据库 知识图谱
医疗垂直领域生成式搜索优化（GEO）：基于 RAG 与知识图谱的召回增强架构实战
本文提出医疗垂直领域生成式搜索优化（GEO）新范式，融合Schema结构化标记、知识图谱映射与RAG召回增强技术，显著提升非公医疗机构信息的有效召回率与语义一致性。实测显示mAP提升225%，事实一致性达98.5%。（239字）
李淇
434 5
luanpanfei
|
安全 数据库 数据安全/隐私保护
处理用户输入数据格式验证不通过的情况时，如何给出友好的提示信息？
处理用户输入数据格式验证不通过的情况时，如何给出友好的提示信息？
luanpanfei
1249 78
游客szolpe7lr4a3g
|
11月前
|
Java 关系型数据库 应用服务中间件
零基础服务器搭建教程：30分钟快速部署你的第一台服务器
入职小白突遭“下马威”，首周被要求搭建包含 Odoo ERP、NGINX、MySQL 和 Java 应用的服务器，却从零基础开始摸索，历经系统配置、软件安装、服务部署等重重难关。在时间紧、技术难的困境中，意外发现一键部署工具 ，借助其自动化能力快速完成任务，不仅赢得老板认可，也开启了自主学习之路：从 systemd 到 NGINX 配置，从 Odoo 结构到 Shell 脚本编写，逐步成长为“能搭服务器的人”。
游客szolpe7lr4a3g
1548 0
零基础服务器搭建教程：30分钟快速部署你的第一台服务器
云流雨洄
|
网络协议 安全 API
WebSocket、Socket、TCP 和 HTTP 的差别与应用场景
WebSocket、Socket、TCP 和 HTTP 是网络通信中的四大“使者”，各具特色：HTTP 适合短时请求，TCP 稳定可靠，Socket 灵活定制，WebSocket 实现实时双向通信。本文用通俗语言解析它们的区别与应用场景，助你为项目选择最合适的通信方式。
云流雨洄
3385 3
ephemerals__
|
搜索推荐 算法 C语言
【排序算法】八大排序（上）（c语言实现）（附源码）
本文介绍了四种常见的排序算法：冒泡排序、选择排序、插入排序和希尔排序。通过具体的代码实现和测试数据，详细解释了每种算法的工作原理和性能特点。冒泡排序通过不断交换相邻元素来排序，选择排序通过选择最小元素进行交换，插入排序通过逐步插入元素到已排序部分，而希尔排序则是插入排序的改进版，通过预排序使数据更接近有序，从而提高效率。文章最后总结了这四种算法的空间和时间复杂度，以及它们的稳定性。
ephemerals__
992 8
技术小达人
|
人工智能 安全 Java
AI 时代：从 Spring Cloud Alibaba 到 Spring AI Alibaba
本次分享由阿里云智能集团云原生微服务技术负责人李艳林主讲，主题为“AI时代：从Spring Cloud Alibaba到Spring AI Alibaba”。内容涵盖应用架构演进、AI agent框架发展趋势及Spring AI Alibaba的重磅发布。分享介绍了AI原生架构与传统架构的融合，强调了API优先、事件驱动和AI运维的重要性。同时，详细解析了Spring AI Alibaba的三层抽象设计，包括模型支持、工作流智能体编排及生产可用性构建能力，确保安全合规、高效部署与可观测性。最后，结合实际案例展示了如何利用私域数据优化AI应用，提升业务价值。
技术小达人
1856 4

热门文章

最新文章

  • 1
    上标下标汇总
  • 2
    电脑ip在哪里查看?windows系统查看ip地址的8种方法
  • 3
    VPC DHCP类型的ECS修改DNS
  • 4
    Redis安全规范----check list
  • 5
    Dubbo Mesh | 阿里巴巴中间件团队在 Service Mesh 的实践和探索（附PPT）
  • 6
    面向自动驾驶的高精地图及数据采集生产体系
  • 7
    带你读《弹性计算—无处不在的算力》第一章：开篇 1.2：弹性计算的价值
  • 8
    SignalR QuickStart
  • 9
    Reverse Linked List II
  • 10
    35佳以字体为核心的优秀网页设计作品
  • 1
    企业知识库为什么不能用一个硬盘搞定
    26
  • 2
    RAG系统存储架构深度解析：异构存储统一接入、向量化索引优化与物理级数据隔离实践
    27
  • 3
    私有化知识库的异构存储架构实践：从CTO视角看企业级AI基础设施
    27
  • 4
    公路裂缝目标检测数据集：3类别、2,000张图像 | 目标检测
    33
  • 5
    【VM】VMware下载、安装和创建虚拟机一篇搞定（附官网安装包）
    43
  • 6
    【2026最新】DBeaver下载、安装、数据库管理一篇搞定（附官网社区版安装包）
    58
  • 7
    云原生架构实战：美业 SaaS 走向私有化，多租户架构与数据隔离深度实践
    33
  • 8
    Arthas trace 命令怎么用？一行定位最慢那行代码
    29
  • 9
    阿里云AI Agent智能体专用轻量应用服务器：算力 + Tokens模型额度一体化套餐特性梳理
    37

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！