【JavaScript】日程管理系统 页面案例开发

news2024/11/14 15:28:47

文章目录

  • 一、登录页及校验
  • 二、注册页及校验


一、登录页及校验

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日程管理登录</title>
    <style>
        .ht {
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }

        .tab {
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }

        .ltr td {
            border: 1px solid powderblue;

        }

        .ipt {
            border: 0px;
            width: 50%;

        }

        .btn1 {
            border: 2px solid powderblue;
            border-radius: 4px;
            width: 60px;
            background-color: antiquewhite;

        }

        #usernameMsg, #userPwdMsg {
            color: rgb(230, 87, 51);
        }

        .buttonContainer {
            text-align: center;
        }
    </style>

    <script>
        // 检验用户名格式是否合法的函数
        function checkUsername() {
            // 定义正则表示字符串的规则
            var  usernameReg= /^[a-zA-Z0-9]{5,10}$/
            // 获得用户在页面上输入的信息
            var usernameInput = document.getElementById("usernameInput");
            var username = usernameInput.value;
            // 获取格式提示条
            var usernameMsg = document.getElementById("usernameMsg");
            //格式有误时,返回FALSE,在页面上提示
            if (!usernameReg.test(username)){
                usernameMsg.innerText = "格式输入有误!"
                return false;
            }

            //格式正确 返回TRUE 页面提示OK
            usernameMsg.innerText = "OK";
            return true;
        }

        // 验证密码是否正确
        function checkUserPwd() {
            var  userPwdReg= /^[0-9]{6}$/
            // 获取密码框ID 与 输入的value
            var userPwdInput = document.getElementById("userPwdInput");
            var userPwd = userPwdInput.value;

            // 获取提示条
            var userPwdMsg = document.getElementById("userPwdMsg");

            // 验证密码格式正确否
            if(!userPwdReg.test(userPwd)){
                userPwdMsg.innerText = "密码格式有误!";
                return false;
            }

            userPwdMsg.innerText = "OK";
            return true;
        }

        function checkForm() {
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();

            return flag1&&flag2;
        }
    </script>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请登录</h3>
<form method="post" action="/user/login" onsubmit="return checkForm()">
    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <td>请输入账号</td>
            <td>
                <input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()">
                <span id="usernameMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>请输入密码</td>
            <td>
                <input class="ipt" type="password" id="userPwdInput" name="userPwd" onblur="checkUserPwd()">
                <span id="userPwdMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td colspan="2" class="buttonContainer">
                <input class="btn1" type="submit" value="登录">
                <input class="btn1" type="reset" value="重置">
                <button class="btn1"><a href="SMRegister.html">去注册</a></button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

二、注册页及校验

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日程管理注册</title>
    <style>
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;

        }
        .ipt{
            border: 0px;
            width: 50%;

        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;

        }

        .msg {
            color: gold;
        }

        .buttonContainer{
            text-align: center;
        }
    </style>

    <script>
        function checkUsername() {
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/
            var usernameInput = document.getElementById("usernameInput")
            var username = usernameInput.value
            var usernameMsg = document.getElementById("usernameMsg")
            if(!usernameReg.test(username)){
                usernameMsg.innerText="格式有误"
                return false
            }
            usernameMsg.innerText="OK"
            return true
        }

        function checkUserPwd() {
            var userPwdReg = /^\d{6}$/
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value
            var userPwdMsg = document.getElementById("userPwdMsg")
            if(!userPwdReg.test(userPwd)){
                userPwdMsg.innerText="账号格式有误!"
                return false
            }
            userPwdMsg.innerText="OK"
            return true
        }

        function checkReUserPwd(){
            var userPwdReg = /^\d{6}$/
            // 再次输入的密码的格式
            var reUserPwdInput = document.getElementById("reUserPwdInput")
            var reUserPwd = reUserPwdInput.value
            var reUserPwdMsg = document.getElementById("reUserPwdMsg")
            if(!userPwdReg.test(reUserPwd)){
                reUserPwdMsg.innerText="密码格式有误!"
                return false
            }

            // 获得上次密码,对比两次密码是否一致
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value
            if(reUserPwd !== userPwd){
                reUserPwdMsg.innerText = "两次密码输入不一致!"
                return false;
            }

            reUserPwdMsg.innerText="OK"
            return true
        }

        function checkForm(){
            var flag1 = checkUsername()
            var flag2 = checkUserPwd()
            var flag3 = checkReUserPwd()

            return flag1 && flag2 && flag3
        }
    </script>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请注册</h3>
<form method="post" action="/user/register" onsubmit="return checkForm()">
    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <td>请输入账号</td>
            <td>
                <input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()">
                <span id="usernameMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>请输入密码</td>
            <td>
                <input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()">
                <span id="userPwdMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>确认密码</td>
            <td>
                <input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()">
                <span id="reUserPwdMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td colspan="2" class="buttonContainer">
                <input class="btn1" type="submit" value="注册">
                <input class="btn1" type="reset" value="重置">
                <button class="btn1"><a  href="SMLogin.html">去登录</a></button>
            </td>
        </tr>
    </table>

</form>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1398520.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

商务与经济统计:中英文转换

数据分析基础中英文转换 Chap 1 数据与统计资料 Data and Statistics 1.2 数据 Data 数据集 Data Sets 个体 Element 变量 Variables 观测值 Observations 测量尺度 Scales of Measurement&#xff1a; 名义尺度 Nominal Scale 顺序尺度 Ordinal Scale 区间尺度 Interval…

数据结构之set类

set类 set 是集合类。这个类很特别&#xff0c;它是唯一坚决追求“特立独行”的数据类型。在这里&#xff0c;你没办法找到两个一样的值&#xff0c;即使强硬赋予&#xff0c;它也会强硬剔除&#xff0c;也就是去重&#xff0c;一个非常实用的技能&#xff0c;这也是 set 类存…

Web自动化之显式等待与隐式等待

等待就是当运行代码时&#xff0c;如果页面的渲染速度跟不上代码的运行速度&#xff0c;就需要人为的去限制代码执行的速度。 在做 Web 自动化时&#xff0c;一般要等待页面元素加载完成后&#xff0c;才能执行操作&#xff0c;否则会报找不到元素等各种错误&#xff0c;这样就…

软件测试基础知识整理(详细版)收藏这篇足矣

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

后面的输入框与前面的联动,输入框只能输入正数(不用正则)

概要 提示&#xff1a;这里可以描述概要 前面的输入框是发票金额&#xff0c;后面的输入框是累计发票金额&#xff08;含本次&#xff09;--含本次就代表后倾请求的接口的数据&#xff08;不是保存后返显的-因为保存后返显的是含本次&#xff09;是不含本次的所以在输入发票金…

ACM题解Day1|1.Accurate Movement ,2.Help the Support Lady, 3.Absolute Game

1.Accurate Movement 思路 : 本题为模拟题主要是模拟方块的移动,其中 以两木块的最右端做为记录点. 先挪动a, 每次a块只能挪到和b块相同的位置, b块每次最多挪动(b-a).为什么因为有限制挡板然后俩木块要不能同时移动只能移动一一个 #include<bits/stdc.h> using namespac…

网页设计(九)JavaScript基础应用

一、网页中文字的字号选择性改变 单击前初始状态页面 单击“中”链接后页面 文字素材&#xff1a;   JavaScript是一种能让你的网页更加生动活泼的程式语言&#xff0c;也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的…

Linux系统安装NFS服务器

NFS是一种网络文件系统&#xff0c;英文全称Network File System&#xff0c;通过NFS可以让不同的主机系统之间共享文件或目录。通过NFS&#xff0c;用户可以直接在本地NFS客户端读写NFS服务端上的文件&#xff0c;是非常好的共享存储工具。本篇文章将介绍如何在CentOS7上安装N…

使用Python在本地生成助记词

新建并打开一个空文件夹 逐行 执行命令 python3 -m pip install --upgrade pippip3 install eth_accountpip3 install web3touch acco.py然后看到文件夹下面会有个acco.py文件 将把下面的代码粘贴到acco.py中保存。 import os from eth_account import Accountif __name__ …

全网最详细!!Python 爬虫快速入门

1. 背景 最近在工作中有需要使用到爬虫的地方&#xff0c;需要根据 Gitlab Python 实现一套定时爬取数据的工具&#xff0c;所以借此机会&#xff0c;针对 Python 爬虫方面的知识进行了学习&#xff0c;也算 Python 爬虫入门了。 需要了解的知识点&#xff1a; Python 基础语…

Windows给docker设置阿里源

windows环境搭建专栏&#x1f517;点击跳转 Windows系统的docker设置阿里源 文章目录 Windows系统的docker设置阿里源1.获得镜像加速器2.配置docker 由于我们生活在中国大陆&#xff0c;所以外网的访问总是那么慢又困难&#xff0c;用docker拉取几兆的小镜象还能忍受&#xff…

idea中使用git提交代码报 Nothing To commit No changes detected

问题描述 在idea中右键&#xff0c;开始将变更的代码进行提交的时候&#xff0c;【Commit Directory】点击提交的时候 报 Nothing To commit No changes detected解决方案 在这里点击Test 看看是不是能下面显示git版本&#xff0c;不行的话 会显示一个 fix的字样&#xff0c;行…

【2023我的编程之旅】七次不同的计算机二级考试经历分享

目录 我报考过的科目 第一次报考MS Office 第二次报考Web语言&#xff0c;C语言&#xff0c;C语言 第三次报考C语言&#xff0c;C语言&#xff0c;Java语言 分享一些备考二级的方法 一些需要注意的细节 结语 2023年的CSDN征文活动已经进入了尾声&#xff0c;在这最后我…

YOLOv8改进 | 进阶实战篇 | 利用YOLOv8进行视频划定区域目标统计计数

一、本文介绍 Hello,各位读者,最近会给大家发一些进阶实战的讲解,如何利用YOLOv8现有的一些功能进行一些实战, 让我们不仅会改进YOLOv8,也能够利用YOLOv8去做一些简单的小工作,后面我也会将这些功能利用PyQt或者是pyside2做一些小的界面给大家使用。 在开始之前给大家推…

二、VS2019编译的VTK9.0.0 + Qt 5.14.2 环境测试

1. 使用CMake VS2019 编译vtk 9.0.0 时,需要启用支持Qt开关、如下图 如果不会编译的可以参见我的这篇文章: 一、VTK 9.0.0 编译安装步骤 VS2019 CMake3.26.0-CSDN博客 打开Qt5.14.2 ,创建Qt Widget 项目: 构建设置选择 MSVC2017 64bit pro 项目文件加入两行配置: …

链表存数相加算法(leetcode第2题)

题目描述&#xff1a; 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外&#xff0c;这…

zabbix监控php-fpm 服务的状态

目录 内容纯手敲&#xff0c;有错误请私信博主 一、zabbix-agent端配置 1.下载php-fpm 2.打开php-fpm的状态页面 3.启动php-fpm 4.安装nginx 5.设置nginx &#xff0c;设置代理php&#xff0c;和php-fpm的状态页面匹配 6重启nginx 7.查询php-fpm的状态页面 8. 根据用户…

Redis--HyperLogLog的指令语法与使用场景举例(UV统计)

文章目录 前言HyperLogLog介绍HyperLogLog指令使用使用场景&#xff1a;UV统计 前言 Redis除了常见的五种数据类型之外&#xff0c;其实还有一些少见的数据结构&#xff0c;如Geo&#xff0c;HyperLogLog等。虽然它们少见&#xff0c;但是作用却不容小觑。本文将介绍HyperLogL…

LeetCode 热题 100 | 双指针(下)

目录 42. 接雨水 1 方法一&#xff1a;我的方法 2 方法二&#xff1a;动态规划 3 方法三&#xff1a;双指针 菜鸟做题第一周&#xff0c;语言是 C 42. 接雨水 1 方法一&#xff1a;我的方法 Warning&#xff1a;这是我的智障做法&#xff0c;请勿模仿 我只能说它教会…

CVE2020-1938漏洞复现

这个漏洞是tomcat的 然后我们先了解漏洞产生的原理 首先我们先来看tmocat纠结是干什么的 tomcat是个中间件 最主要的两个结构、 servlet的定义和部分源码&#xff0c; 漏洞就是从这来的 tomcat处理http请求 源码分析 tomcat 8.5.46 哎 这教学视频讲半天看不懂 不看原…