java web开发之上机指导(2)

创建一个用户注册的页面,让用户输入姓名、密码、电话和邮箱,使用javascript脚本完成密码校验、电话号码校验、邮箱校验和空格内容校验。

开发步骤如下。

(1)创建一个项目名为CheckInfomation,在WebContent文件夹下创建一个index.jsp文件,代码如下:

<%@page language="java.util.*"pageEncoding="UTF-8"%>
<html>
    <head>
        <title>检测单元表是否为空</title>
            <script language="javascript">
            function checkNull(form){
                /*判断是否为空*/
                for(i=0;i<form.length){
                    if(form.elements[i].value==""){
                        alert("很抱歉,"+form.elements[i].title+"不能为空!");
                        form.elements[i].focus();
                        return false;
                    }
                }
                /*判断两次密码是否一致*/
                var pwd1=document.getElementById("pwd1_id").value;
                var pwd2=document.getElementById("pwd2_id").value;
                if(pwd1!=pwd2){
                    alert("两次密码不一致,请重新输入!");
                    return false;
                }
                /*判断电话号码是否有效*/
                var phone=document.getElementById("phone_id").value;
                var regExpression=/^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|(18[0,5,6,7,8,9]\d{8}))$/;
                var objExp = new RegExp(regExpression);//创建正则表达式对象
                if(objExp.test(phone)==false){
                    alert("您输入的手机号码有误!");
                    return false;
                }
            }
            </script>
        </head>
        
        <body>
        <form name="form1" method="post" action="" οnsubmit="return checkNull(form1)">
        <table width="296" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
            <tr>
                <td colspan="2" bgcolor="#eeeee">·用户注册</td>
            </tr>
            <tr>
                <td width="200" align ="center" bgcolor="#FFFFFF">用户名:</td>
                <td width="384" bgcolor="#FFFFFF"><input name="user" type="text" id = "user_id" title="用户名">
                *</td>
            </tr>
            <tr>
                <td align="center" bgcolor="#FFFFFF">密&nbsp;&nbsp;码:</td>
                <td bgcolor="#FFFFFF"><input name="pwd" type="password" id = "pwd1_id" title="密码">
                *</td>
            </tr>
            <tr>
                <td align="center" bgcolor="#FFFFFF">确认密码:</td>
                <td bgcolor="#FFFFFF"><input name="pwd2" type="password" id = "pwd2_id" title="确认密码">
                *</td>
            </tr>
            <tr>
                <td align="center" bgcolor="#FFFFFF">电话:</td>
                <td bgcolor="#FFFFFF"><input name="phone" type="text" id = "phone_id" title="电话">
                *</td>
            </tr>
            <tr>
                <td align="center" bgcolor="#FFFFFF">邮箱:</td>
                <td bgcolor="#FFFFFF"><input name="email" type="text" id = "email_id" title="邮箱">
                *</td>
            </tr>
            <tr>
                <td bgcolor="#FFFFFF">&nbsp;</td>
                <td bgcolor="#FFFFFF"><input name="Submit" type="submit" class="btn_grey" value="提交">
                &nbsp;
                <input name = "Submit2" type="rest" calss="btn_grey" value="重置">
                </td>
            </tr>
        </table>
        </form>
        </body>
        </html>

(2)将项目部署到服务器中,启动服务器,访问地址http://localhost:8080/CheckInformation/,查看页面效果如下图:

 

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

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

相关文章

小程序开发之基础知识(0)

前言&#xff1a;2016年9月21日,微信小程序正式开启内测。 2017年1月9日0点,万众瞩目的微信第一批小程序正式上线,用户可以体验到各种各样小程序提供的服务。 人类发展史大抵经历了石器时代&#xff0c;青铜器与铁器时代、工业与科技时代&#xff08;从第一次工业革命算起&…

鼠标悬浮改变背景颜色

将鼠标放在div上时div的背景颜色发生改变&#xff0c;把鼠标移走div之后&#xff0c;div的背景颜色回复原来的颜色。 效果图演示 没有将鼠标放在div上时&#xff08;lanse&#xff09; 将鼠标放在div上之后&#xff08;变为红色&#xff09; 下面看代码 由于代码较短&…

获取焦点改变输入框背景色

当输入框获取焦点时&#xff08;鼠标点到输入框时&#xff09;为红色&#xff0c;失去焦点时还原&#xff08;鼠标未点输入框内&#xff09;为白色。 效果图演示 没有获取焦点 获取焦点 代码演示 <!DOCTYPE html> <html><head lang"en"><…

【OpenCV 例程200篇】53. Scipy 实现图像二维卷积

【OpenCV 例程200篇】53. Scipy 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的条…

点击按钮切换图片

点击按钮时将当前显示的图片切换为指定要显示的图片 效果图演示 未点击更换图片之前显示的图片 点击更换图片之后 程序详解&#xff1a; 准备两张互相切换的图片给更换图片按钮添加点击事件把两张图片放在一个数组里点击按钮后执行判断如果是第一张图片就换成第二张&#…

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的…

【OpenCV 例程200篇】55. 可分离卷积核

【OpenCV 例程200篇】55. 可分离卷积核 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 空间滤波器是由邻域和定义的操作构成的&#xff0c;滤波器规定了滤波时采用的邻域形状及该区域内像素值的…

Anaconda 安装 Python 库(MySQLdb)的方法

转载自&#xff1a;苏皖静儿 [已解决]Anaconda 安装 Python 库&#xff08;MySQLdb&#xff09;的方法 zoerywzhou163.com http://www.cnblogs.com/swje/ 作者&#xff1a;Zhouwan 2017-12-4 安装python库的过程中&#xff0c;最重要的地方就是版本需要兼容。其中操作系统为…

获取数据库内容放入下拉框中

获取数据库里的数据放入下拉框中&#xff0c;使下拉框显示的内容是数据库里的内容 功能分析&#xff1a; 设计并实现数据库插入相关数据在登陆页面点击注册按钮时跳到Servlet中在Servlet中连接数据库查询内容放入session中传给jsp页面在jsp页面接受session内容并使用for循环输…

【OpenCV 例程200篇】56. 低通盒式滤波器

【OpenCV 例程200篇】56. 低通盒式滤波器 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理…

数据只读且无法修改

对输入框的数据进行只读不可修改的设置。 功能分析&#xff1a; 无论你是删除增加点击选中等所有操作对输入框的数据无影响&#xff0c;输入框的数据只会是原始的数据不可修改&#xff0c;一切操作无效。 先看效果图&#xff08;数据不可更改&#xff09; 要实现此效果一共有…

【OpenCV 例程200篇】57. 低通高斯滤波器

【OpenCV 例程200篇】57. 低通高斯滤波器 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理…

IDEA包的分层显示

使IDEA的项目和包分层显示&#xff0c;结构更加清晰。 未设置分层显示之前的包结构 设置了分层显示之后的包结构 那么如何设置呢&#xff0c;让我们一起来看看吧&#xff01; 设置包结构分层方法 第一步&#xff08;点击像设置一样的图标出先如下菜单&#xff09; 第二部 …

【OpenCV 例程200篇】58. 非线性滤波—中值滤波

【OpenCV 例程200篇】58. 非线性滤波—中值滤波 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像…

【OpenCV 例程200篇】59. 非线性滤波—双边滤波

【OpenCV 例程200篇】59. 非线性滤波—双边滤波&#xff08;Bilateral filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图…

部门信息管理系统

实现对部门信息的分类管理&#xff0c;对不同部门人员的管理&#xff08;增删改查&#xff09;&#xff0c;新用户的注册和登陆等 功能分析&#xff1a; 实现用户的登陆实现用户的注册&#xff08;注册不同的部门和职位&#xff09;登陆之后会显示所有员工和经理的信息实现对…

【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波

【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波&#xff08;Joint bilateral filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件…

租车系统

为了资源的节约有效利用&#xff0c;使车辆发挥更大的作用&#xff0c;我在此做了一个租车系统。 功能分析&#xff1a; 1&#xff1a;登录功能 2&#xff1a;后台管理功能 3&#xff1a;车辆管理功能 4&#xff1a;用户管理功能 5&#xff1a;前台用户功能 6&#xff1a;查看…

【OpenCV 例程200篇】61. 导向滤波(Guided filter)

【OpenCV 例程200篇】61. 导向滤波&#xff08;Guided filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑…

使用MATLAB GUI创建图形用户界面GUI

MATLAB是众多理工科学生及工程师经常使用的一款数学软件&#xff0c;除了可以实现数据处理&#xff0c;矩阵运算、函数绘制等功能外&#xff0c;MATLAB还可以实现图形用户界面的设计。 下面介绍如何让小白也能用GUI创建最基本的用户界面&#xff0c;并帮助大家学会在今后的…