1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 .sp {
8 width: 50px;
9 height: 23px;
10 display: inline-block;
11 border-bottom: solid 1px;
12 margin-bottom: 10px;
13 font-size: 18px;
14 font-weight: bold;
15 }
16
17 .totle {
18 width: 550px;
19 height: 220px;
20 font-size: 15px;
21 margin: auto;
22 padding: 15px 15px 15px 15px;
23 border: solid 1px;
24 }
25
26 div {
27 width: 550px;
28 height: 50px;
29 margin-bottom: 0px;
30 font-size: 12px;
31 }
32
33 #zhuce {
34 float: left;
35 margin-left: 75px;
36 color: white;
37 width: 70px;
38 height: 30px;
39 background-color: #0066CC;
40 }
41
42 #res {
43 float: right;
44 color: white;
45 width: 70px;
46 height: 30px;
47 background-color: #0066CC;
48 margin-right: 240px;
49 }
50
51 .span {
52 display: inline-block;
53 margin-left: 80px;
54 color: red;
55 font-size: 12px;
56 }
57
58 .siz {
59 font-size: 12px;
60 color: darkgray;
61 }
62
63 #name, #mima, #qmi {
64 height: 30px;
65 width: 250px;
66 }
67 </style>
68 </head>
69 <script type="text/javascript" src="../../js/system.js"></script>
70 <body>
71 <div class="totle">
72 <form>
73 <span class="sp">注 册</span>
74
75 <div>
76 用户名:<input type="text" id="name" placeholder="请输入用户名">
77 <span class="siz">字母开头,只能是6-10位字母数字下划线</span></br>
78 <span class="span"></span>
79 </div>
80 <div>
81 密 码:<input type="password" id="mima" placeholder="请输入密码">
82 <span class="siz">只能是6位数字</span><br/>
83 <span class="span"></span>
84 </div>
85 <div>
86 确定密码:<input type="password" id="qmi" placeholder="请再次确定密码">
87 <span class="siz">输入与上次一致的密码</span><br/>
88 <span class="span"></span>
89 </div>
90 <div>
91 <input type="button" value="注册" id="zhuce">
92 <input type="reset" value="重置" id="res">
93 </div>
94 </form>
95 </div>
96 <script type="text/javascript">
97 var sp = document.getElementsByClassName("span");
98 var bInStatus = false;
99 var reg = /^[a-zA-Z]{1}w{5,9}$/g;
100 var reg2 = /^d{6}$/g;
101 $$("name").onchange = function () {
102 if (reg.test(this.value)) {
103 sp[0].innerHTML = "";
104 bInStatus = true;
105 } else {
106 sp[0].innerHTML = "用户名格式不正确!";
107 $$("name").focus();
108 bInStatus = false;
109 return;
110 }
111 }
112 $$("mima").onchange = function () {
113 if (reg2.test(this.value)) {
114 sp[1].innerHTML = "";
115 bInStatus = true;
116 } else {
117 sp[1].innerHTML = "密码格式不正确!";
118 $$("mima").focus();
119 bInStatus = false;
120 return;
121 }
122 }
123 $$("qmi").onchange = function () {
124 if ($$("mima").value == this.value) {
125 sp[2].innerHTML = "";
126 bInStatus = true;
127 } else {
128 sp[2].innerHTML = "密码确认错误";
129 $$("qmi").focus();
130 bInStatus = false;
131 }
132 }
133 function checkIMp(v) {//判断是否为空，
134 return v.length > 0 ? true : false;
135 }
136 $$("zhuce").onclick = function () {
137 if (checkIMp($$("name").value) && checkIMp($$("mima").value) && checkIMp($$("qmi").value)) {
138 if (bInStatus) {//如果填写各项均符合格式，就可以执行下面的代码了
139 //可以提交数据了
140 comm.cl("OK");
/////////以下内容，会经常重复使用，固定不变/////////
141 //生成地址
142 var url = "http://ama.adwo.com/advmessage/adv/addResultJsonP.action?advid=30125";//会长期使用，老死不变的网址，呵呵。
143 //实例化xhr对象，用于在后台与服务器交换数据
//AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。
144 var xhr = null;//由于要进行兼容性处理，先设为空
145 //兼容性处理
146 if (window.XMLHttpRequest) {//一般的浏览器使用
147 xhr = new XMLHttpRequest();
148 } else if (window.ActiveXObject) {//IE6以下使用
149 xhr = new ActiveXObject("Microsoft.XMLHTTP");
150 }
151 //先打开这个对象
152 url += "?name=" + $$("name").value;
153 xhr.open("GET", url, true);//发送数据的方式GET,路径url，
154 //然后再发送请求
155 xhr.send();
156 xhr.onreadystatechange = function () {
157 if (xhr.readyState == 4) {
158 //200对应OK,如404-未找到网页
159 if (xhr.status == 200) {
160 sp[0].innerHTML = xhr.response;
161 comm.cl(xhr.response);
162 }
163 }
164 }
165 } else {
166 comm.cl("ERROR");
167 }
///////////////////////////////////////////////////////////
168 //下面三个else if用来判断填写的内容是否为空
169 } else if (checkIMp($$("name").value) == false) {
170 sp[0].innerHTML = "用户名不能为空";
171 $$("name").focus();
172 }
173 else if (checkIMp($$("mima").value) == false) {
174 sp[1].innerHTML = "密码不能为空";
175 $$("mima").focus();
176 }
177 else if (checkIMp($$("qmi").value) == false) {
178 sp[2].innerHTML = "确认密码不能为空";
179 $$("qmi").focus();
180 }
181 }
182 </script>
183 </body>
184 </html>