记账本开发记录——第三天（2020.1.20）

本来按照今天的原计划来说，应该学习完javascript的基础内容。但今天一天都在干活，到晚上八点才坐到电脑前，已经精疲力尽了。于是简单设计了一下网站的几个页面和大体结构。以下是具体：

网站主界面:

开始记账界面：

(希望实现:点击加号后弹出一个界面进行增)

(删除时要弹出确认提示)

(改时可以更改所有信息,也是弹出一个界面)

账单汇总

(选择汇总条件，目前只计划添加某时间段,如果时间允许增加种类等属性)

(查找后输出在某段时间内总花费)

图表数据（尝试使用百度的smartart功能，生成一段时间内的数据的图表显示)，这一部分暂时作为提高内容,最后制作。

进入后台:

后台界面，为了不用天天打开navicat，设计后台管理各种数据，同时也是练一下登录时的二次检验。

凑数界面，为了试一下各种各样的界面刷新和分页（试试）.

今天由于时间原因,只简单学习了javascript的基础知识,实现了注册表单的前端验证。也就是我们第一次java web测试的前端验证.对于javascript的基本结构和语法有了一定了解，也知道了javascript和java一点关系没有(嗐)，同时了解到正则表达式一般不需要专门去记忆，可以直接从网上查找。以下是其代码(基本和昨天学习的注册界面百分之八十相似，只是多了javascript的部分代码):

明天的任务:继续学习javascript的知识，并且使用CSS+DIV+HTML实现记账本页面的基本格式。

希望明天的我没那么多家务活可以干嗐。

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>注册页面</title>
  6         <script>
  7             function checkForm(){
  8                 // alert("aa");
  9                 /**校验用户名*/
 10                 // 1.获取用户输入的数据
 11                 var uValue = document.getElementById("user").value;
 12                 if(uValue==""){
 13                     // 2.给出错误提示信息
 14                     alert("用户名不能为空!");
 15                     return false;
 16                 }
 17
 18                 // 校验密码
 19                 var pValue = document.getElementById("password").value;
 20                 if(pValue==""){
 21                     alert("密码不能为空!");
 22                     return false;
 23                 }
 24                 /**校验确认密码*/
 25                 var rpValue = document.getElementById("repassword").value;
 26                 if(rpValue!=pValue){
 27                     alert("两次密码输入不一致!");
 28                     return false;
 29                 }
 30
 31                 // 校验邮箱
 32                 var eValue = document.getElementById("email").value;
 33                 if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
 34                     alert("邮箱格式不正确!");
 35                     return false;
 36                 }
 37             }
 38         </script>
 39     </head>
 40     <body>
 41         <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
 42             <!-- 1.logo部分 -->
 43             <tr>
 44                 <td>
 45                     <!-- 嵌套一个一行三列的表格 -->
 46                     <table border="1px" width="100%">
 47                         <tr height="50px">
 48                             <td width="33.3%">
 49                                 <img src="../img/logo2.png" height="47px">
 50                             </td>
 51                             <td width="33.3%">
 52                                 <img src="../img/header.png" height="47px">
 53                             </td>
 54                             <td width="33.3%">
 55                                 <a href="#">登录</a>
 56                                 <a href="#">注册</a>
 57                                 <a href="#">购物车</a>
 58                             </td>
 59                         </tr>
 60                     </table>
 61                 </td>
 62             </tr>
 63             <!-- 2.导航栏部分 -->
 64         <tr height="50px">
 65             <td bgcolor="black">
 66                 <a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 67                 <a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 68                 <a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 69                 <a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 70                 <a href="#"><font color="white">家用电器</font></a>
 71             </td>
 72         </tr>
 73             <!-- 3.注册表单 -->
 74             <tr>
 75                 <td height="600px" background="../img/regist_bg.jpg">
 76                     <!-- 嵌套一个十行二列的表格 -->
 77                     <form action="#" method="get" name="regform" onsubmit="return checkForm()">
 78                     <table border="1px" width="750px" height="360px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
 79                         <tr height="40px">
 80                             <td colspan="2">
 81                                 <font size="4">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER
 82                                 </td>
 83                         </tr>
 84                         <tr>
 85                             <td>
 86                                 用户名
 87                             </td>
 88                             <td>
 89                                 <input type="text" name="user" id ="user" size="45px">
 90                             </td>
 91                         </tr>
 92                         <tr>
 93                             <td>密码</td>
 94                             <td>
 95                                 <input type="password" name="password" id="password" size="34px">
 96                             </td>
 97                         </tr>
 98                         <tr>
 99                             <td>确认密码</td>
100                             <td>
101                                 <input type="password" name="repassword" id="repassword" size="34px">
102                             </td>
103                         </tr>
104                         <tr>
105                             <td>Email</td>
106                             <td>
107                                 <input type="text" name="email" id="email" size="34px">
108                             </td>
109                         </tr>
110                         <tr>
111                             <td>姓名</td>
112                             <td>
113                                 <input type="text" name="username" size="34px">
114                             </td>
115                         </tr>
116                         <tr>
117                             <td>性别</td>
118                             <td>
119                                 <input type="radio" name="sex" value="男">男
120                                 <input type="radio" name="sex" value="女">女
121                             </td>
122                         </tr>
123                         <tr>
124                             <td>出生日期</td>
125                             <td>
126                                 <input type="text" name="birthday" size="34px">
127                             </td>
128                         </tr>
129                         <tr>
130                             <td>验证码</td>
131                             <td>
132                                 <input type="text" name="yzm">
133                                 <img src="../img/yanzhengma.png">
134                             </td>
135                         </tr>
136                         <tr>
137                             <td colspan="2">
138                                 <input type="submit" value="注册">
139                             </td>
140                         </tr>
141                     </table>
142                     </form>
143                 </td>
144             </tr>
145             <!-- 4.广告图片 -->
146         <tr>
147             <td>
148                 <img src="../img/ad.jpg" width="100%">
149             </td>
150         </tr>
151             <!-- 5.友情链接和版权信息 -->
152              <tr>
153             <td align="center">
154                 <a href="#">关于我们</a>&nbsp;&nbsp;
155                 <a href="#">联系我们</a>&nbsp;&nbsp;
156                 <a href="#">招贤纳士</a>&nbsp;&nbsp;
157                 <a href="#">法律声明</a>&nbsp;&nbsp;
158                 <a href="#">友情链接</a>&nbsp;&nbsp;
159                 <a href="#">支付方式</a>&nbsp;&nbsp;
160                 <a href="#">配送方式</a>&nbsp;&nbsp;
161                 <a href="#">服务声明</a>&nbsp;&nbsp;
162                 <a href="#">广告声明</a>
163                 <p>
164                     Copyright © 2005-2016 传智商城 版权所有
165                 </p>
166             </td>
167         </tr>
168         </table>
169     </body>
170 </html>

使用JS进行表单检验

原文地址：https://www.cnblogs.com/wushenjiang/p/12219677.html

时间： 2024-09-30 11:57:12

记账本开发记录——第三天（2020.1.20）的相关文章

记账本开发记录——第八天（2020.1.26）

在疫情如此严重的现在,在家安心学习. 昨天初一守夜无聊的时候学完了JQ剩下的部分.这里讲到了一个插件validate.使用这个插件可以很方便的进行表单的检验,并且具有很好看的效果样式.以下是代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网站注册页面</title> 6 <style> 7 #contan

记账本开发记录——第十二天（2020.1.30）

今天,学习了HTTP协议的相关内容和Servlet的运行原理.HTTP协议,全称叫做超文本传输协议,是一种网络协议,用来定义WEB浏览器与WEB服务器之间交换数据的过程. 在HTTP协议中,分为HTTP请求和HTTP响应(request和response)在HTTP请求中,根据请求方式的不同,内容也有所不同.对于get请求,会将内容放在浏览器URL内,不如post请求安全.post请求会把内容放到request内,而不会显示在浏览器URL内,相对来说要更加的安全. 在请求中有很多固定的参数,作为

Web版记账本开发记录（三）开发过程遇到的问题小结2

问题1,获得当前时间 Date d = new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String now = df.format(d); System.out.println(now); 输出结果就是当前时间问题2,date类型的日期分离字符串先将date日期转换为String类型 String sdate = dateToString(sqlDate); //分割st

LNMP系列网站零基础开发记录（三）

[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配置 ... 三.web页面开发好吧,本来想单独写一章bootstrap的,但是前端确实没什么好写的,这里我们直接结合实际直接开搞吧.做WEB我习惯先把想要的页面模板做完,然后再根据razar或者这里要用到的django template修改.美工确实不太好,P得一手烂图,所以一般都用现成的开源框架,这里我

家庭记账本开发记录（1）

这个寒假前面的时间一直在学习web前端,因为之前开发JavaWeb时,一些界面应用太粗糙,所以利用前段时间系统了解了一下前端技术,以便接下来后端开发的界面美观.再就是今天的关于家庭记账本软件的开发,确定了一下设计思路,其中主要是对数据库的操作比较重要,因为记账的收入支出需要进行数据汇总,一段时间以后用可视化数据报表进行呈现.对收入支出的费用又各有分类,收入有薪资.理财.红包.借入.收债.其他,支出消费.餐饮.购物.住房.交通.通讯.娱乐.医疗.教育.红包.旅行.投资.借出.还债.其他,至于对数据

记账本开发记录——第四天（2020.1.21）

总结:今天学习完了javascript的第一部分基础知识(昨天没学完的)并尝试使用div+css编写了记账本的index.html.以下是具体: 首先,使用javascript完成了首页轮播图效果,使用了setInterval.下面是代码:(实现较为低级) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>首页</title>

记账本开发记录——第十天（2020.1.28）

今天,简单学习了JDBC连接池的概念和自定义连接池. 所谓连接池,就是连接完后不close,而是归还到连接池内,可以解决数据库连接的性能问题. 对于自定义连接池,我们可以自己创建连接池,然后通过这个连接池进行连接.如下代码: 1 public class MyDataSource implements DataSource{ 2 // 创建一个List集合用于存放多个连接对象. 3 private List<Connection> list = new ArrayList<Connect

记账本开发记录——第十三天（2020.1.31）

今天主要是学习了如何使用servletcontext来进行一个记录网站登录人数的案例.在实现这个案例之前,首先要学习相关的知识. ServletContext:在服务器启动的时候,为每个web应用创建一个单独的ServletContext对象,我们可以使用这个对象存储数据. 那么我们实现这个案例的思路是如何呢?我们可以在登录的Servlet中初始一个变量count为0,然后将其存到ServletContext中,在进入页面时就读取ServletContext的内容.下面是相关代码: packag

记账本开发记录——第五天（2020.1.22）

今天继续学习了javascript的相关内容,同时学习了关于表格标签的一些新标签. 首先,学习了如何使表格隔行换色.整体的思路不算复杂,用java里的思路就可以大致理解,以下是效果和代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格隔行换色</title> 6 <script> 7 window.onl