参考：http://blog.csdn.net/fightfaith/article/details/50277337

需求：实现用户注册页面并作出逻辑校验。要求：

（1）完成注册页面样式如下：

（2）页面提交，用户注册信息不符合规范，要显示红色提示框，如下：

分析：JSP实现页面元素，CSS做页面美化，JavaScript 实现逻辑校验；用户注册规则采用正则表达式。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <base href="<%=basePath%>">

        <title>注册页面</title>

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="This is my page">

        <link type="text/css" rel="stylesheet" href="register.css">

        <script type="text/javascript" src="register.js"></script>

    </head>

    <body>

        <form action="UserServlet?method=register" method="post"

            onsubmit="return validateForm()">

            <table border="26" align="center" width="50%">

                <caption>

                    用户注册

                </caption>

                <tr>

                    <td align="right">

                        <sup>

                            <font color="red">*</font>

                        </sup>

                        用户名：

                    </td>

                    <td>

                        <input type="text" name="username" id="username"

                            class="input_class" onblur="checkusername(this)" />

                        <span id="username_span">用户名由3-5个字符组成</span>

                    </td>

                </tr>

                <tr>

                    <td align="right">

                        <sup>

                            <font color="red">*</font>

                        </sup>

                        密码：

                    </td>

                    <td>

                        <input type="password" name="password1" id="password1"

                            class="input_class" onblur="checkpassword1(this)" />

                        <span id="password1_span">请输入8-12位密码</span>

                    </td>

                </tr>

                <tr>

                    <td align="right">

                        <sup>

                            <font color="red">*</font>

                        </sup>

                        确认密码：

                    </td>

                    <td>

                        <input type="password" name="password2" id="password2"

                            class="input_class" onblur="checkpassword2(this)" />

                        <span id="password2_span">两次密码不一致</span>

                    </td>

                </tr>

                <tr>

                    <td align="right">

                        <sup>

                            <font color="red">*</font>

                        </sup>

                        Email：

                    </td>

                    <td>

                        <input type="text" name="email" id="email" class="input_class"

                            onblur="checkemail(this)" />

                        <span id="email_span">格式示例：xxxxxxxx@163.com</span>

                    </td>

                </tr>

                <tr>

                    <td align="center" colspan="2">

                        <!-- 合并两列 -->

                        <input type="submit" class="aaa" value="注册" />

                        <input type="reset" class="aaa" value="重置" />

                    </td>

                </tr>

            </table>

        </form>

    </body>

</html>

2、CSS进行页面美化。

在本文 CSS 代码中主要根据类选择器、标签选择器来设置相应的标签样式：

<span style="font-size:14px;">

.input_class {

    width:250px;

    height:16px;

}  

caption{

    font-size:30px;

    color:red;

    text-shadow: yellow 6px 0px 5px;

    font-stretch: wider;

    font-weight:;

}  

.aaa{

    font-size:16px;

    font-weight: bold;

}  

</span>

3、JavaScript 进行逻辑校验。

　　在JavaScript 代码中需要用到正则表达式来简化验证：

        //用户名：

        var  usernameRegex = /^\w{3,15}$/;

        //密码：

        var passwordRegex = /^\w{6,12}$/;

        //邮箱：

        var emailRegex = /^\w+@\w+(\.\w+)+$/;  

        //alert("222");

        function validateForm(){ //定义validateForm方法用于客户端校验

            var flag = true;

            //校验用户名

            var usernameNode = byId("username"); //获得ID值为username的节点对象

            var username = usernameNode.value;   //获得usernameNode节点的值，即用户在username文本框内填写的值

            if(!usernameRegex.test(username)){    //验证获得到的值是否符合正则表达式

                byId("username_span").style.color = "red"; //如果不符合，则将ID值为username_span的节点对象内容变为红色

                flag = false;        //返回false，不提交

            }  

            //校验密码

            var passwordNode = byId("password1");  //获得ID值为password的节点对象

            var password = passwordNode.value;

            if(!passwordRegex.test(password)){

                byId("password1_span").style.color = "red";

                flag = false;

            }  

            //确认密码

            var rePasswordNode = byId("password2");  //获得ID值为rePassword的节点对象

            var rePassword = rePasswordNode.value;

            if(!password==rePassword){

                byId("password2_span").style.color = "red";

                flag = false;

            }else if(!passwordRegex.test(rePassword)){

                byId("password2_span").style.color = "red";

                flag = false;

            }else{

                byId("password2_span").style.color = "green";

            }  

            //校验邮箱

            var emailNode = byId("email");  //获得ID值为Email的节点对象

            var email = emailNode.value;

            if(!emailRegex.test(email)){

                byId("email_span").style.color = "red";

                flag = false;

            }

            return flag;

                        }  

        function byId(id){  //自定义方法，用于获取传递过来的ID值对应的节点对象

            return document.getElementById(id);

        }  

        function checkUsername(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范

            //校验用户名

            var username = node.value;  //得到传递过来的节点对象的值

            if(!usernameRegex.test(username)){  //验证是否符合节点对应的正则表达式

                byId("username_span").style.color = "red"; //不符合，相应内容变成红色

            }else{

                byId("username_span").style.color = "green";  //符合，相应内容变成绿色

            }

        }  

        function checkPassword(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范

            //校验密码

            var password1 = node.value;

            //alert("111");

            if (!passwordRegex.test(password)) {

                byId("password1_span").style.color = "red";

            }

            else {

                byId("password1_span").style.color = "green";

            }

        }     

        function checkRePassword(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范

            //确认密码

            var rePassword = node.value;

            var password = byId("password2").value;

            //alert(repassword+"***"+password);

            if(!password==rePassword){

                byId("rePassword2_span").style.color = "red";

            }else if(!passwordRegex.test(rePassword)){

                byId("rePassword2_span").style.color = "red";

            }else{

                byId("rePassword2_span").style.color = "green";

            }

        }         

        function checkEmail(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范

            //校验邮箱

            var email = node.value;

            if(!emailRegex.test(email)){

                byId("email_span").style.color = "red";

            }else{

                byId("email_span").style.color = "green";

            }

        }

JavaScript、CSS、JSP 实现用户注册页面与信息校验的更多相关文章

  1. 超详细的php用户注册页面填写信息完整实例（附源码）

    这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...

  2. [JavaScript] css将footer置于页面最底部

    <!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...

  3. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  4. JavaScript、JSP、Java及javaEE

    对JavaScript.JSP.Java及javaEE之间区别的理解 JavaScript和Java名字极为类似,相信不少的初学者或者准备学这些知识的人对于JavaScript.JSP.Java及Ja ...

  5. 新手详解JAVA+数据库+JSP完成简单页面

    本篇以数据库添加为例(本例中数据库名为“xinxi”表单名字为“stud”) 准备---实体层: package entity; public class Student { private Stri ...

  6. YUI前端优化之javascript,css篇

    三.JavaScript和CSS篇 JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression) ...

  7. servlet+jsp update修改页面的实现，整整搞了两个小时才搞定

    package DAO; public class books { private int bid; private String bname; private int booksl; private ...

  8. javascript、JSP、JS有什么区别和联系

    js是javascript的缩写.以下是JSP与JS的区别和联系: 名字:JS:JavaScriptJSP:Java Server Pages 执行过程:JSP先翻译,翻译成Servlet执行如: t ...

  9. Javascript实现返回上一页面并刷新

    今天写了一个小小的提示成功的页面,同时要求返回上一页面,并实现对上一页面的操作进行刷新(例如删除的,添加的),在网上搜寻了一遍,基本上90%的都是说的是用window.history.go(-1), ...

随机推荐

  1. openfire+asmack搭建的安卓即时通讯（三） 15.4.9

    (能用得上话的话求点赞=-=,我表达不好的话跟我说哦) 上一次我们拿到了服务器端的组数据和用户信息,这就可以为我们日后使用好友系统打下基础了! 但是光是拿到了这些东西我们怎么能够满足呢?我们一个即时通 ...

  2. Hadoop_HDFS文件读写代码流程解析和副本存放机制

    Hadoop学习笔记总结 01.RPC(远程过程调用) 1. RPC概念 远程过程指的不是同一个进程的调用.它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. 不能直接拿到远 ...

  3. 【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  4. codeforces 480B B. Long Jumps(贪心)

    题目链接: B. Long Jumps time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  6. Spring Mvc 在非controller层 实现获取request对象

    一般我们在Controller层,会编写类似这样的方法 @Controller @RequestMapping(value="/detail") public class GetU ...

  7. 总结Gerrit常用命令

    查看分支列表,带有*的分支表示是当前所在分支[root@115~~]#git branch 查看分支详细情况 (推荐这种方式)[root@115~~]#git branch -av 创建分支(比如de ...

  8. javascript中的迭代器

    1.forEach迭代器 forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化 //forEach迭代器 function square(num) ...

  9. pl/sql developer中的SQL语句

    1.无论是在查询还是在插入的时候,值都必须是单引号‘’,否则会报错,ORA-00904:标识符无效.

  10. WP老杨解迷：如何获得更多的应用评价和解读内容刷新

    Windows Phone的市场评论功能研究的时间比较长,只是这一功能,估计就能写一篇论文,我曾搞过多款评论数超高的游戏,其中<少林塔防>是重量级的作品,至今稳坐最高评分第一把交椅,如果不 ...