释放双眼，带上耳机，听听看~！
这里不进行很复杂的后台验证以及JavaScript的正则表达式，只是简单的介绍下这个技术，简单的后台接收与跳转，大概了解怎么验证的就可以。具体的技术，我后面还会继续写博客的。本人也还在学习中。
表单验证1-简单验证
进行简单的验证，用户名必须为abcd，密码长度必须大于等于6
然后根据用户输入的数据，在后面给出提示。
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2 <head>
3 <title>DHTML技术演示---表单验证</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5 <script>
6 function checkUserName(){
7 //alert("aa");//测试这个失去焦点监听是否管用
8 var oUserNameNode = document.getElementsByName("userName")[0];
9 var name = oUserNameNode.value;//这个type="text"的value的值是方框内的字符
10 //以后有后台时，“abcd”这个数据应该通过ajax技术向后台要
11 //这里我们只是做简单的演示-就是填写的name必须是abcd
12 if(name=="abcd"){
13 document.getElementById("userNameSpan").innerHTML="用户名正确".fontcolor("green");
14 }else{
15 document.getElementById("userNameSpan").innerHTML="用户名错误".fontcolor("red");
16 }
17 }
18
19 function checkPwd(){
20 var oUserPwdNode = document.getElementById("pwd")[0];
21 var pwd=oUserPwdNode.value;
22
23 if(pwd.length>=6){
24 document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green");
25 }else{
26 document.getElementById("userPwdSpan").innerHTML="密码长度必须大于等于6".fontcolor("red");
27 }
28 }
29
30 </script>
31
32 </head>
33
34 <body>
35 <form>
36 <!--onblur 在对象失去输入焦点时触发。 -->
37 用户名:<input type="text" name="userName" onblur="checkUserName()" />
38 <span id="userNameSpan"></span>
39 <br/>
40 <br/>
41 <!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的-->
42 密码:<input type="text" name="pwd" onblur="checkPwd()" />
43 <span id="userPwdSpan"></span>
44 </form>
45
46 </body>
47
48</html>
49
360浏览器8.1 演示结果：
用户名不符合规则：
密码不符合规则：
注册表单的验证2-正则表达式
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2 <head>
3 <title>DHTML技术演示---注册表单的验证--js中使用正则表达式</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <script type="text/javascript">
6 function checkUserName(){
7 var oUserNameNode = document.getElementsByName("userName")[0];
8 var userName = oUserNameNode.value;
9 //用正则检验
10 var reg = new RegExp("[a-z]{4}", "i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
11 //i---表示忽略大小写
12 //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
13 //^代表开始 $代表结束
14
15 var oUserNameSpan = document.getElementById("userNameSpan");
16 //alert(reg.test(userName));
17
18 if (reg.test(userName)) {
19 oUserNameSpan.innerHTML = "用户名格式正确".fontcolor("green");
20 }
21 else {
22 oUserNameSpan.innerHTML = "用户名格式错误".fontcolor("red");
23 }
24 }
25 </script>
26 </head>
27
28 <body>
29 <!-- 演示JS中正则表达式的用法 -->
30 <script type="text/javascript">
31 //var reg = /^[0-9]{6}$/ ; //法一
32 var reg = new RegExp("^[0-9]{6}$");//法二
33 var str = "123456";
34 var bRes = reg.test(str);
35 //111使用正则表达式对象中的方法进行验证---只能用于判断是否匹配，功能类似于Java中的String类中的matches()方法
36 //alert(bRes);//true
37
38 //222使用String对象中的方法进行正则检验---功能更强大，类似于Java当中的Matcher工具
39 var res = str.match(reg);//匹配的结果保存在res(是一个数组)中，如果没有匹配到则res为null。
40 //alert(res);//123456
41 //match方法返回的数组有三个属性：input、index和lastIndex。
42
43 //一点细节---使用new RegExp()方式时，特殊字符要转义
44 //var reg2 =/^\d{6}$/; //"\"不需要转义
45 var reg2= new RegExp("^\d{6}$");//※※※注意"\"要转义
46 //▲▲▲上面那句是错误的，必须要写成：new RegExp("^\\d{6}$")
47 //alert( reg2.test("123456") );
48 </script>
49
50
51 <form>
52 <!--onblur 在对象失去输入焦点时触发。 -->
53 用户名:<input type="text" name="userName" onblur="checkUserName()" />
54 <span id="userNameSpan"></span>
55 </form>
56
57 </body>
58</html>
59
360浏览器8.1 演示结果：
只需要包含连续4个字母就可以了。
注册表单的验证且控制提交–前端校验:
代码文件创建位置：
代码演示：
3form3.html
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
2 <head>
3 <title>DHTML技术演示---注册表单的验证且控制提交--前端校验</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <script type="text/javascript">
6 function checkUserName(){
7 var oUserNameNode = document.getElementsByName("userName")[0];
8 var userName = oUserNameNode.value;
9 //用正则检验
10 var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
11 //i---表示忽略大小写
12 //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
13 //^代表开始 $代表结束
14
15 var oUserNameSpan = document.getElementById("userNameSpan");
16 if(reg.test(userName)){
17 oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green");
18 return true;
19 }else{
20 oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red");
21 return false;
22 }
23 }
24
25 function checkPwd(){
26 var oUserPwdNode = document.getElementsByName("pwd")[0];
27 var pwd = oUserPwdNode.value;
28 var reg2 = new RegExp("^[\\w\\d]{6,9}$");
29 if(reg2.test(pwd)){
30 document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green");
31 return true;
32 }else{
33 document.getElementById("userPwdSpan").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red");
34 return false;
35
36 }
37 }
38
39 function checkUser(){
40 if(checkUserName() && checkPwd() ){//如果还有其他项需要在提交前验证，直接把那个验证函数写这里就行
41 return true;
42 }else{
43 return false;
44 }
45
46 }
47
48 </script>
49
50 </head>
51
52
53 <body>
54 <!--通过注册onsubmit事件响应来控制表单的提交，如果return false则不会提交，而return true则会提交。如果不注册onsubmit事件即是return true
55 onsubmit 当表单将要被提交时触发。
56 <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return true;">
57 -->
58 <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
59 用户名：<input type="text" name="userName" onblur="checkUserName()" />
60 <span id="userNameSpan"></span>
61 <!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的-->
62 密码：<input type="text" name="pwd" onblur="checkPwd()" />
63 <span id="userPwdSpan"></span>
64 <br/>
65 <input type="submit" value="注册"/>
66 </form>
67 <hr/>
68
69 <!--表单提交方式2---自己写个按钮来代替form自带的提交按钮-->
70 <form id="userinfo" action="/dhtmlProj/servlet/RegServlet" >
71 用户名:<input type="text" name="userName" onBlur="checkUserName2()"/>
72 <span id="userNameSpan2"></span><br/>
73 密码:<input type="text" name="pwd" onBlur="checkPwd2()"/>
74 <span id="userPwdSpan2"></span>
75 <br/>
76 </form>
77 <input type="button" value="注册" onclick="mySubmit()" />
78 <script type="text/javascript">
79 function mySubmit(){
80 var oFormNode = document.getElementById("userinfo");
81 if(checkUserName2()&&checkPwd2()){
82 oFormNode.submit();//submit 提交表单。
83 }
84 }
85
86 function checkUserName2(){
87 var oUserNameNode = document.getElementsByName("userName")[1];
88 var userName = oUserNameNode.value;
89 //用正则检验
90 var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
91 //i---表示忽略大小写
92 //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
93 //^代表开始 $代表结束
94
95 var oUserNameSpan = document.getElementById("userNameSpan2");
96 if(reg.test(userName)){
97 oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green");
98 return true;
99 }else{
100 oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red");
101 return false;
102 }
103 }
104
105 function checkPwd2(){
106 var oUserPwdNode = document.getElementsByName("pwd")[1];
107 var pwd = oUserPwdNode.value;
108 var reg2 = new RegExp("^[\\w\\d]{6,9}$");
109 if(reg2.test(pwd)){
110 document.getElementById("userPwdSpan2").innerHTML="密码格式符合要求".fontcolor("green");
111 return true;
112 }else{
113 document.getElementById("userPwdSpan2").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red");
114 return false;
115
116 }
117 }
118
119 </script>
120
121 </body>
122</html>
123
show.jsp:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
3
4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
5<html>
6 <head>
7 <title>这是注册后的显示页面</title>
8 </head>
9
10 <body>
11 <%
12 out.println(request.getAttribute("uName"));
13 out.println(request.getAttribute("pwd"));
14 %>
15 <%
16 for(int i=0;i<3;i++){
17 //这个下面可以写html代码
18 %>
19 <div>欢迎</div>
20 <%
21 //这个上面可以写html代码
22 }
23 %>
24 </body>
25</html>
26
RegServlet.java
这个是new一个Servlet。
会自动给我们配好web.xml
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3import java.io.IOException;
4import java.io.PrintWriter;
5
6import javax.servlet.ServletException;
7import javax.servlet.http.HttpServlet;
8import javax.servlet.http.HttpServletRequest;
9import javax.servlet.http.HttpServletResponse;
10
11public class RegServlet extends HttpServlet {
12 public void doGet(HttpServletRequest request, HttpServletResponse response)
13 throws ServletException, IOException {
14 doPost(request, response);
15 }
16
17 public void doPost(HttpServletRequest request, HttpServletResponse response)
18 throws ServletException, IOException {
19 request.setCharacterEncoding("utf-8");//设置编码
20 String name = request.getParameter("userName");//userName为提交过来的表单中的一个input的name属性
21 String pwd = request.getParameter("pwd");
22 //System.out.println(name);
23 request.setAttribute("uName", "hncu---"+name);
24 request.setAttribute("pwd", "pwd---"+pwd);
25
26 request.getRequestDispatcher("/dhtml/6formsubmit/jsps/show.jsp").forward(request, response);
27 //输出，导向另外的页面显示
28 }
29
30}
31
32
web.xml
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2<web-app version="2.5"
3 xmlns="http://java.sun.com/xml/ns/javaee"
4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
6 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
7 <display-name></display-name>
8 <servlet>
9 <description>This is the description of my J2EE component</description>
10 <display-name>This is the display name of my J2EE component</display-name>
11 <servlet-name>RegServlet</servlet-name>
12 <servlet-class>cn.hncu.user.RegServlet</servlet-class>
13 </servlet>
14
15 <servlet-mapping>
16 <servlet-name>RegServlet</servlet-name>
17 <url-pattern>/servlet/RegServlet</url-pattern>
18 </servlet-mapping>
19 <welcome-file-list>
20 <welcome-file>index.jsp</welcome-file>
21 </welcome-file-list>
22</web-app>
23
24
360浏览器8.1 演示图片：
当格式都填写正确时，点注册按钮，自动跳转到另外的页面。
有一个格式错误时，点注册按钮不会有反应的。
注册表单的验证且控制提交–前端校验–最终版本:
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
2 <head>
3 <title>DHTML技术演示---注册表单的验证且控制提交--前端校验--最终版本</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5
6 <script type="text/javascript">
7 function check(name,reg,spanId,okInfo,errInfo){
8 var value = document.getElementsByName(name)[0].value;
9 //用正则检验
10 var oSpanNode = document.getElementById(spanId);
11 if(reg.test(value)){
12 oSpanNode.innerHTML=okInfo.fontcolor("green");
13 return true;
14 }else{
15 oSpanNode.innerHTML=errInfo.fontcolor("red");
16 return false;
17 }
18
19 }
20
21 function checkUserName(){
22 var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母,注意"i"中的双引号不能省略
23 return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误");
24 }
25
26 function checkPwd(){
27 var reg = new RegExp("^[\\w\\d]{6,9}$");
28 return check("pwd",reg,"userPwdSpan","密码格式符合要求","密码长度必须是6-9位的数字字母或下划线");
29 }
30
31 function checkPwd2(){
32 var flag;
33 var pwd = document.getElementsByName("pwd")[0].value;
34 var pwd2 = document.getElementsByName("pwd2")[0].value;
35 var oSpanNode = document.getElementById("userPwd2Span");
36 if(pwd==pwd2){
37 oSpanNode.innerHTML="两次密码一致".fontcolor("green");
38 flag = true;
39 }else{
40 oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
41 flag = false;
42 }
43 return flag;
44 }
45
46 function checkMail(){
47 var reg = /^\w+@\w+(\.\w+)+$/i;
48 return check("mail",reg,"userMailSpan","邮箱格式正确","邮箱格式不正确");
49 }
50
51 function checkUser(){//控制表单的提交
52 if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){
53 return true;
54 }else{
55 return false;
56 }
57 }
58
59 </script>
60
61
62 </head>
63
64 <body>
65 <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
66 用户名：<input type="text" name="userName" onblur="checkUserName()" />
67 <span id="userNameSpan"></span>
68 <br/>
69 输入密码：<input type="text" name="pwd" onblur="checkPwd()" />
70 <span id="userPwdSpan"></span>
71 <br/>
72 确认密码：<input type="text" name="pwd2" onBlur="checkPwd2()"/>
73 <span id="userPwd2Span"></span>
74 <br/>
75 邮件地址：<input type="text" name="mail" onblur="checkMail()" />
76 <span id="userMailSpan"></span>
77 <br/>
78 <input type="submit" value="注册">
79 </form>
80
81
82
83 </body>
84</html>
85
360浏览器8.1 演示结果：
只有全部格式填写正确后再点注册按钮才会有响应。
全部格式填写正确后，点注册按钮后的页面，其实就是跳到show.jsp页面了。（自己可以随便定位到哪的）
