艺术人生,人生的艺术!

艺术人生,人生的艺术,事业,亲情,爱情,友情!以上完美的结合是时间最外大的艺术

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  3 随笔 :: 0 文章 :: 0 评论 :: 0 Trackbacks

Ajax的注册应用

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

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


  1<!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<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7<script language="javascript" src="js/common.js"></script>
  8<script language="javascript" src="js/prototype.js"></script>
  9<script language="javascript" src="js/passwordstrength.js"></script>
 10<script language="javascript" src="reg.js"></script>
 11<style type="text/css">
 12<!--
 13body,td,th,div,input {
 14font-family: Courier New, Courier, mono;
 15font-size: 12px;
 16}

 17body {
 18margin: 0px;
 19}

 20.FrameDivPass{
 21background-color: #F7F7F7;
 22border: 1px solid #EEEEEE;
 23padding: 2px;
 24height: 100%;
 25float: left;
 26}

 27.FrameDivPass input{
 28background-color: #FFFFFF;
 29width: 150px;
 30float: left;
 31border: 1px solid #6FBE44;
 32}

 33.FrameDivPass div{
 34color: #999999;
 35float: left;
 36margin-right: 5px;
 37margin-left: 10px;
 38height: auto;
 39width: auto;
 40display: block;
 41}

 42.FrameDivWarn{
 43background-color: #FFFBE7;
 44border: 1px solid #B5B5B5;
 45padding: 2px;
 46height: 100%;
 47float: left;
 48}

 49.FrameDivWarn input{
 50background-color: #FFFFFF;
 51width: 150px;
 52float: left;
 53border: 1px solid #FF0000;
 54}

 55.FrameDivWarn div{
 56color: #333333;
 57float: left;
 58margin-right: 5px;
 59margin-left: 10px;
 60height: auto;
 61width: auto;
 62display: block;
 63}

 64.FrameDivNormal{
 65border: 1px solid #FFFFFF;
 66padding: 2px;
 67height: 100%;
 68float: left;
 69background-color: #FFFFFF;
 70}

 71.FrameDivNormal input{
 72background-color: #FFFFFF;
 73width: 150px;
 74float: left;
 75border: 1px solid #999999;
 76}

 77.FrameDivNormal div{
 78color: #333333;
 79float: left;
 80margin-right: 5px;
 81margin-left: 10px;
 82height: auto;
 83width: auto;
 84display: block;
 85}

 86#checkBtn{
 87float: left;
 88}

 89#checkDiv{
 90color: #333333;
 91float: left;
 92margin-right: 5px;
 93margin-left: 10px;
 94height: auto;
 95width: auto;
 96display: block;
 97}

 98-->
 99
</style>
100<script language="javascript">
101var icon = '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">';
102var ns = ["usr","pwd","repwd","eml"];
103function changeUsr(){
104if($("checkBtn").disabled) $("checkBtn").disabled = false
105}

106function checkUsr(s)
107var ma = ["用户名(3-16位)!","用户名由数字、英文、下划线、中杠线组成!"];
108if(!limitLen(s,3,16)){
109showInfo("usr",ma[0]);
110return false;
111}

112if(!hasAccountChar(s)){
113showInfo("usr",ma[1]);
114return false;
115}

116showInfo("usr");
117return true;
118}

119function checkPwd(s){
120var ma = ["密码(5-16位)!","密码不能包含中文或全角符号!","两次输入的密码不一致!"];
121ps.update(s);
122if(!limitLen(s,5,16)){
123showInfo("pwd",ma[0]);
124return false;
125}

126if(hasChineseChar(s)){
127showInfo("pwd",ma[1]);
128return false;
129}

130if(limitLen($F("repwdInput"),5,16)){
131if(trim($F("repwdInput")) == trim(s)){
132showInfo("pwd");
133showInfo("repwd");
134return true;
135}
else{
136showInfo("pwd",ma[2]);
137return false;
138}

139}

140showInfo("pwd");
141return true;
142}

143function checkPwd2(s){
144var ma = ["确认密码(5-16位)!","密码不能包含中文或全角符号!","两次输入的密码不一致!"];
145if(!limitLen(s,5,16)){
146showInfo("repwd",ma[0]);
147return false;
148}

149if(hasChineseChar(s)){
150showInfo("repwd",ma[1]);
151return false;
152}

153if(limitLen($F("pwdInput"),5,16)){
154if(trim($F("pwdInput")) == trim(s)){
155showInfo("pwd");
156showInfo("repwd");
157return true;
158}
else{
159showInfo("repwd",ma[2]);
160return false;
161}

162}

163showInfo("repwd");
164return true;
165}

166function checkEml(s){
167var ma = ["请输入常用邮件!","邮件格式不正确!"];
168if(s.length < 5){
169showInfo("eml",ma[0]);
170return false;
171}

172if(!isEmail(s)){
173showInfo("eml",ma[1]);
174return false;
175}

176showInfo("eml");
177return true;
178}

179function showInfo(n,s){
180var fdo = $(n+"FrameDiv");
181var ido = $(n+"InfoDiv");
182if(typeof s == 'undefined'){
183fdo.className = "FrameDivPass";
184ido.innerHTML = "填写正确!";
185}
else{
186fdo.className = "FrameDivWarn";
187ido.innerHTML = icon + s;
188}

189}

190//======================================================;
191function loadCheck(){
192if(trim($F('usrInput')).length == 0return;
193$("checkBtn").disabled = true;
194var o = $("checkDiv");
195o.innerHTML = getLoadInfo(); 
196loadAjaxData("reg.asp",{usr:$F('usrInput')},successCheck,errorCheck);
197}

198function successCheck(v){
199var o = $("checkDiv");
200o.innerHTML = getCheckHTML(v.responseText);
201}

202function errorCheck(){
203$("checkBtn").disabled = false;
204var o = $("checkDiv");
205o.innerHTML = getErrorInfo();
206}

207function getCheckHTML(s){
208= (s == "1")? "恭喜您,用户名可以注册!":"对不起,该用户名已经被注册!";
209return s;
210}

211//======================================================;
212function getLoadInfo(){
213return '<img src="images/loading.gif" width="16" height="16" border="0" align="absmiddle">正在加载数据';
214}

215function getErrorInfo(){
216return '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">数据加载失败!';
217}

218//======================================================;
219function initPage(){
220for(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">&nbsp;</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<script language="javascript">
242var ps = new PasswordStrength();
243ps.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">&nbsp;</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 秋伟光 阅读(128) 评论(0)  编辑 收藏 引用
只有注册用户登录后才能发表评论。