HtmlDay01--Notes(表单验证用户注册+表格对齐跨行跨列)

最新推荐文章于 2023-12-09 16:36:14 发布
最新推荐文章于 2023-12-09 16:36:14 发布
阅读量292 收藏
点赞数
文章标签： JavaScript Html table form
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38290612/article/details/79476641
版权

一、表单验证用户注册



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script type="text/javascript">
        function validate() {
            var uname = document.getElementById("uname");
            var pwd = document.getElementById("pwd");
            var email = document.getElementById("email");
            if (uname.value == "") {
                alert("用户名不能为空");
                return false;
            }
            if (pwd.value.length < 6) {
                alert("密码不能少于位6位");
                return false;
            }
            if (email.value.indexOf("@") == -1) {
                alert("邮箱格式错误！");
                return false;
            }
            return true;
        }

        function tip(obj) {
            if (obj.id == "uname") {
                var uname = document.getElementById("uname");
                var tip1 = document.getElementById("tip1");
                tip1.style.color = "red";
                if (uname.value == "") {
                    tip1.innerHTML = "* 用户名不能为空！";
                } else {
                    tip1.innerHTML = "";
                }
            } else if (obj.id == "pwd") {
                var pwd = document.getElementById("pwd");
                var tip2 = document.getElementById("tip2");
                tip2.style.color = "red";
                if (pwd.value.length < 6) {
                    tip2.innerHTML = "* 密码不能少于位6位！";
                } else {
                    tip2.innerHTML = "";
                }
            } else if (obj.id == "email") {
                var email = document.getElementById("email");
                var tip3 = document.getElementById("tip3");
                tip3.style.color = "red";
                if (email.value.indexOf("@") == -1) {
                    tip3.innerHTML = "* 邮箱格式错误！";
                } else {
                    tip3.innerHTML = "";
                }
            }
        }

        function changeBackground(obj) {
            obj.style.backgroundColor = "#aabbcc";
        }

        function returnBackground(obj) {
            obj.style.backgroundColor = "white";
        }
    </script>
</head>

<body>
    <form method="post" action="serverURL" οnsubmit="return validate()">注册用户名：
        <input type="text" name="color" id="uname" οnfοcus="changeBackground(this)" οnblur="tip(this),returnBackground(this)" placeholder="请在此填写用户名" /> <span id="tip1"></span>
        <br/>
        <br/>注册密码：
        <input type="password" name="color" id="pwd" οnfοcus="changeBackground(this)" οnblur="tip(this),returnBackground(this)" placeholder="请在此填写密码" /> <span id="tip2"></span>
        <br/>
        <br/>注册邮箱：
        <input type="text" name="color" id="email" οnfοcus="changeBackground(this)" οnblur="tip(this),returnBackground(this)" placeholder="请在此填写邮箱" /> <span id="tip3"></span>
        <br/>
        <br/>
        <input type="submit" value="注册" />
    </form>
</body>

</html>

二、表格对齐跨行跨列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table标签</title>
</head>

<body>
    <table border="1" align="center">
        <thead>
            <thead>
                <td colspan="5" align="center">学生信息</td>
            </thead>
            <tbody>
                <th>学号</th>
                <th>名号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>成绩</th>
            </tbody>></thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>大侠</td>
                <td>风清扬</td>
                <td>男</td>
                <td>95.5</td>
            </tr>
            <tr>
                <td>2</td>
                <td>大侠</td>
                <td>令狐冲</td>
                <td>男</td>
                <td>91</td>
            </tr>
            <tr>
                <td rowspan="2">3</td>
                <td rowspan="2">郭靖夫妇</td>
                <td>郭靖</td>
                <td>男</td>
                <td>80.5</td>
            </tr>
            <tr>
                <td>黄蓉</td>
                <td>女</td>
                <td>70.5</td>
            </tr>
            <tr>
                <td colspan="4">总分</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Copyright © 2018 Jin Hanquan. All rights reserved.

微风星雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
类似exce跨行跨列表单
08-02
类似exce跨行跨列表单 使用collectionview实现，关键是设置attributes
表单跨行，跨列实现
说文科技，做有态度的研究。
12-15 1357
表单跨行，跨列实现 1. 需求 欲实现表单的多行/列 的合并，但是不影响整体美观。 2. 代码 &lt;html&gt; &lt;head &gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; &lt;!--html, body {. .}这个是设置html, body的样式 --&gt; html, bod...
表格的跨行与跨列
weixin_46370867的博客
09-01 1401
表格的跨行与跨列（课表示例） colspan 属性：用来规定表格单元格可横跨的列数。 rowspan 属性：用来规定表格单元格可横跨的行数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
HTML语言如何一次实现表格整列的对齐方式
l1t的专栏
08-21 1万+
HTML元素 - colGroup定义说明表格中一列或一组列的缺省属性。Specifies property defaults for a column or group of columns in a table.注释嵌套的 COL 属性将覆盖 COLGROUP 属性。使用 SPAN 属性可以指定 COLGROUP 定义的表格列数。该属性的缺省值为 1。COL 元素可以出现在 C
表单验证制作注册页面
weixin_30799995的博客
12-10 439
<body> <form action="好友列表.html" method="get"> <div> 用户名：<input type="text" name="name" id="name" /> </div> <div> 密码：<input type...
Zotero笔记插件zotero-better-notes的基本使用方法与下载
qq_44798850的博客
04-04 3万+
zotero-better-notes是一个很好用的zotero笔记插件，本文主要对b站up主：科研少女王同学的zotero-better-notes讲解视频做了部分总结与个人理解。
使用GIZA++进行词对齐
藏知阁
03-21 1万+
准备双语语料 zh.txt：源语言 海洋 是 一个 非常 复杂 的 事物 。 人类 的 健康 也 是 一 件 非常 复杂 的 事情 。 将 两者 统一 起来 看 起来 是 一 件 艰巨 的 任务 。 但 我 想 要 试图 去 说明 的 是 即使 是 如此 复杂 的 情况 ， 也 存在 一些 我 认为 简单 的 话题 ， 一些 如果 我们 能 理解 ， 就 很 容易 向前 发展 的 话题 。...
K-means和K-means++的算法原理及sklearn库中参数解释、选择
热门推荐
二当家的掌柜
08-08 5万+
前言：　　这篇博文主要介绍k-means聚类算法的基本原理以及它的改进算法k-means的原理及实现步骤，同时文章给出了sklearn机器学习库中对k-means函数的使用解释和参数选择。K-means介绍：　　K-means算法是很典型的基于距离的聚类算法，采用距离 作为相似性的评价指标，即认为两个对象的距离越近，其相似度就越大。该算法认为簇是由距离靠近的对象组成的，因此把得到紧凑且独立的簇作为最
跨平台应用开发进阶(三)： uni-app 实现资源在线升级/热更新
IT全栈 华强工作室
02-13 8074
文章目录一、前言二、wgt 资源升级包升级2.1 修改版本号2.2 发行2.3 安装资源升级包2.3.1 代码示例三、整包升级3.1 客户端实现3.2 服务端实现四、拓展阅读 一、前言 使用 uni-app 开发跨终端应用，可将代码编译到iOS、Android、微信小程序等多个平台，升级时也需考虑多平台同步升级。其中，uni-app发布为小程序的升级模式较简单，只需将开发完的代码提交小程序后台，待审核通过后用户将自动升级。 HBuilderX 1.6.5 起，uni-app 支持生成 App 资源升级包w
Qt优秀开源项目之十九：跨平台记事本Notes
草上爬的博客
12-09 3402
Qt实现的跨平台记事本Notes 1.完全基于Qt和C++ 2.完全开源和跨平台（Linux、macOS、Windows） 3.运行速度快，界面美如画 4.支持Markdown 5.支持使用嵌套文件夹和通用标签分层组织文档 6.支持主题设置，在浅色、深色和深褐色之间切换 7.丰富的快捷键操作，这个一言难尽，得自己去体会了 8.支持开机启动和在线升级
C-plus-plus-Notes:Udacity课程的C ++实践程序
03-26
C加注 Udacity课程的C ++实践程序
automated-release-notes:从Git提交历史记录和票证系统自动生成发行说明
05-16
composer global require foodkit/automated-release-notes 配置 可以将以下配置参数作为参数传递： --host问题跟踪器主机（ ） --user问题跟踪--user户名 --pass问题跟踪密码 --regex问题前缀正则表达式 --format...
offer-notes:有关C ++ C ++笔记与题解练习的注释和答案
03-26
我用C ++资源并记录有关现在的编码器和leetcode参考[1]《 C ++入门》
alfred-search-notes-app:使用Alfred在iCloud中快速打开笔记
05-04
用Alfred搜索Notes.app 搜索标题或创建新注释（如果找不到） 搜索笔记标题和正文 搜索文件夹名称 结果动作 输入以打开便笺/文件夹或创建新便笺（如果找不到） Shift + Enter使用Notes应用内搜索来搜索您的Alfred...
midi-cpp-console:Midi C ++ Windows Api示例控制台应用程序
03-21
midi-cpp-控制台在一个简单的控制台应用程序中在Windows上播放Midi Notes
JQuery注册页面表单检验完善
weixin_30260399的博客
03-08 88
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> &...
二级理论题（选择83+判断96）.xlsx
05-07
二级理论题（选择83+判断96）.xlsx
2024年中国超声非侵入式腐蚀检测传感器行业研究报告.docx
05-07
2024年中国超声非侵入式腐蚀检测传感器行业研究报告
设备OEE实践与教学知识
最新发布
05-07
设备自动化综合利用率实践，详细描述了OEE各方面的参数与应用，让设备自动化工厂利用此工具可以快速提高生产
zotero-better-notes
06-28
zotero-better-notes是一个Zotero插件，它可以帮助用户更好地管理和编辑笔记。它提供了更多的笔记编辑选项，例如可以在笔记中添加图片、表格和链接等。此外，它还可以自动保存笔记，并支持导出和导入笔记。这个插件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值