Ajax的注册应用 [转帖]

Ajax的注册应用

最近发现Ajax在用户注册表单和用户登录表单方面应用，最能体现Ajax的交互特点，因此又是写了一个习作！
演示效果

新开窗口地址： http://www.klstudio.com/demo/ajax/reg.htm

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

"http://www.w3.org/TR/html4/loose.dtd">
3

<html>
4

<head>
5

<title>ajax注册应用</title>
6

<!--
13

body,td,th,div,input {
14

font-family: Courier New, Courier, mono;
15

font-size: 12px;
16

}
17

body {
18

margin: 0px;
19

}
20

.FrameDivPass{
21

background-color: #F7F7F7;
22

border: 1px solid #EEEEEE;
23

padding: 2px;
24

height: 100%;
25

float: left;
26

}
27

.FrameDivPass input{
28

background-color: #FFFFFF;
29

width: 150px;
30

float: left;
31

border: 1px solid #6FBE44;
32

}
33

.FrameDivPass div{
34

color: #999999;
35

float: left;
36

margin-right: 5px;
37

margin-left: 10px;
38

height: auto;
39

width: auto;
40

display: block;
41

}
42

.FrameDivWarn{
43

background-color: #FFFBE7;
44

border: 1px solid #B5B5B5;
45

padding: 2px;
46

height: 100%;
47

float: left;
48

}
49

.FrameDivWarn input{
50

background-color: #FFFFFF;
51

width: 150px;
52

float: left;
53

border: 1px solid #FF0000;
54

}
55

.FrameDivWarn div{
56

color: #333333;
57

float: left;
58

margin-right: 5px;
59

margin-left: 10px;
60

height: auto;
61

width: auto;
62

display: block;
63

}
64

.FrameDivNormal{
65

border: 1px solid #FFFFFF;
66

padding: 2px;
67

height: 100%;
68

float: left;
69

background-color: #FFFFFF;
70

}
71

.FrameDivNormal input{
72

background-color: #FFFFFF;
73

width: 150px;
74

float: left;
75

border: 1px solid #999999;
76

}
77

.FrameDivNormal div{
78

color: #333333;
79

float: left;
80

margin-right: 5px;
81

margin-left: 10px;
82

height: auto;
83

width: auto;
84

display: block;
85

}
86

#checkBtn{
87

float: left;
88

}
89

#checkDiv{
90

color: #333333;
91

float: left;
92

margin-right: 5px;
93

margin-left: 10px;
94

height: auto;
95

width: auto;
96

display: block;
97

}
98

-->
99

</style>
100

var icon = '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">';
102

var ns = ["usr","pwd","repwd","eml"];
103

function changeUsr(){
104

if($("checkBtn").disabled) $("checkBtn").disabled = false;
105

}
106

function checkUsr(s){
107

var ma = ["用户名（3-16位）！","用户名由数字、英文、下划线、中杠线组成！"];
108

if(!limitLen(s,3,16)){
109

showInfo("usr",ma[0]);
110

return false;
111

}
112

if(!hasAccountChar(s)){
113

showInfo("usr",ma[1]);
114

return false;
115

}
116

showInfo("usr");
117

return true;
118

}
119

function checkPwd(s){
120

var ma = ["密码（5-16位）！","密码不能包含中文或全角符号！","两次输入的密码不一致！"];
121

ps.update(s);
122

if(!limitLen(s,5,16)){
123

showInfo("pwd",ma[0]);
124

return false;
125

}
126

if(hasChineseChar(s)){
127

showInfo("pwd",ma[1]);
128

return false;
129

}
130

if(limitLen($F("repwdInput"),5,16)){
131

if(trim($F("repwdInput")) == trim(s)){
132

showInfo("pwd");
133

showInfo("repwd");
134

return true;
135

}else{
136

showInfo("pwd",ma[2]);
137

return false;
138

}
139

}
140

showInfo("pwd");
141

return true;
142

}
143

function checkPwd2(s){
144

var ma = ["确认密码（5-16位）！","密码不能包含中文或全角符号！","两次输入的密码不一致！"];
145

if(!limitLen(s,5,16)){
146

showInfo("repwd",ma[0]);
147

return false;
148

}
149

if(hasChineseChar(s)){
150

showInfo("repwd",ma[1]);
151

return false;
152

}
153

if(limitLen($F("pwdInput"),5,16)){
154

if(trim($F("pwdInput")) == trim(s)){
155

showInfo("pwd");
156

showInfo("repwd");
157

return true;
158

}else{
159

showInfo("repwd",ma[2]);
160

return false;
161

}
162

}
163

showInfo("repwd");
164

return true;
165

}
166

function checkEml(s){
167

var ma = ["请输入常用邮件！","邮件格式不正确！"];
168

if(s.length < 5){
169

showInfo("eml",ma[0]);
170

return false;
171

}
172

if(!isEmail(s)){
173

showInfo("eml",ma[1]);
174

return false;
175

}
176

showInfo("eml");
177

return true;
178

}
179

function showInfo(n,s){
180

var fdo = $(n+"FrameDiv");
181

var ido = $(n+"InfoDiv");
182

if(typeof s == 'undefined'){
183

fdo.className = "FrameDivPass";
184

ido.innerHTML = "填写正确！";
185

}else{
186

fdo.className = "FrameDivWarn";
187

ido.innerHTML = icon + s;
188

}
189

}
190

//======================================================;
191

function loadCheck(){
192

if(trim($F('usrInput')).length == 0) return;
193

$("checkBtn").disabled = true;
194

var o = $("checkDiv");
195

o.innerHTML = getLoadInfo();
196

loadAjaxData("reg.asp",{usr:$F('usrInput')},successCheck,errorCheck);
197

}
198

function successCheck(v){
199

var o = $("checkDiv");
200

o.innerHTML = getCheckHTML(v.responseText);
201

}
202

function errorCheck(){
203

$("checkBtn").disabled = false;
204

var o = $("checkDiv");
205

o.innerHTML = getErrorInfo();
206

}
207

function getCheckHTML(s){
208

s = (s == "1")? "恭喜您，用户名可以注册！":"对不起，该用户名已经被注册！";
209

return s;
210

}
211

//======================================================;
212

function getLoadInfo(){
213

return '<img src="images/loading.gif" width="16" height="16" border="0" align="absmiddle">正在加载数据

';
214

}
215

function getErrorInfo(){
216

return '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">数据加载失败!';
217

}
218

//======================================================;
219

function initPage(){
220

for(var i=0;i<ns.length;i++){
221

$(ns[i]+"Input").value = "";
222

}
223

}
224

</script>
225

</head>
226

<body onLoad="initPage();">
227

<table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
228

<tr>
229

<th width="20%" bgcolor="#EEEEEE" scope="row">用户名</th>
230

<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="usrFrameDiv"><input name="usrInput" type="text" id="usrInput" maxlength="16" onKeyUp="checkUsr(this.value);changeUsr();" onFocus="checkUsr(this.value);">
231

<div id="usrInfoDiv"></div>
232

</div></td>
233

</tr>
234

<tr>
235

<th bgcolor="#EEEEEE" scope="row"> </th>
236

<td bgcolor="#FFFFFF" ><input name="checkBtn" type="button" id="checkBtn" onClick="loadCheck();" value="检测用户名是否可用"> <div id="checkDiv"></div></td>
237

</tr>
238

<tr>
239

<th bgcolor="#EEEEEE" scope="row">密码强度</th>
240

<td bgcolor="#FFFFFF">
241

var ps = new PasswordStrength();
243

ps.setSize("200","22");
244

</script>
245

</td>
246

</tr>
247

<tr>
248

<th bgcolor="#EEEEEE" scope="row">密码</th>
249

<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="pwdFrameDiv"><input name="pwdInput" type="password" id="pwdInput" maxlength="16" onKeyUp="checkPwd(this.value);" onFocus="checkPwd(this.value);">
250

<div id="pwdInfoDiv"></div>
251

</div></td>
252

</tr>
253

<tr>
254

<th bgcolor="#EEEEEE" scope="row">确认密码</th>
255

<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="repwdFrameDiv"><input name="repwdInput" type="password" id="repwdInput" maxlength="16" onKeyUp="checkPwd2(this.value);" onFocus="checkPwd2(this.value);">
256

<div id="repwdInfoDiv"></div>
257

</div></td>
258

</tr>
259

<tr>
260

<th bgcolor="#EEEEEE" scope="row">EMail</th>
261

<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="emlFrameDiv"><input name="emlInput" type="text" id="emlInput" onFocus="checkEml(this.value);" onKeyUp="checkEml(this.value);" maxlength="40">
262

<div id="emlInfoDiv"></div>
263

</div></td>
264

</tr>
265

<tr>
266

<th bgcolor="#EEEEEE" scope="row"> </th>
267

<td bgcolor="#FFFFFF"><input type="submit" name="Submit" value="提交"></td>
268

</tr>
269

</table>
270

</body>
271

</html>
272

PS.本是一个习作,不想公开的,没想到有很多人都想要,算了,我就把相关文件打包一下了,提供大家下载研究了!下载地址:http://www.klstudio.com/demo/ajax/reg.rar (著名,非本人作品,)

posted on 2008-02-13 09:26 秋伟光阅读(188) 评论(0) 编辑收藏引用

只有注册用户登录后才能发表评论。

艺术人生,人生的艺术!

常用链接

留言簿(1)

随笔分类

随笔档案(3)

最新评论

阅读排行榜

评论排行榜