AJAX application Research-Registering applications

Recently found that Ajax in the user registration form and user login forms of unilateral application, the most can reflect the interactive characteristics of Ajax, so it is written a work!

The demo effect is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<title>ajax Registration Application </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script language= "javascript" src= "Js/common.js" ></script>
<script language= "javascript" src= "Js/prototype.js" ></script>
<script language= "javascript" src= "Js/passwordstrength.js" ></script>
<script language= "javascript" src= "Reg.js" ></script>
<style type= "Text/css" >
<!--
Body,td,th,div,input {
Font-family:courier New, Courier, mono;
font-size:12px;
}
Body {
margin:0px;
}
. framedivpass{
Background-color: #F7F7F7;
border:1px solid #EEEEEE;
padding:2px;
height:100%;
Float:left;
}
. Framedivpass input{
Background-color: #FFFFFF;
width:150px;
Float:left;
border:1px solid #6FBE44;
}
. Framedivpass div{
Color: #999999;
Float:left;
margin-right:5px;
margin-left:10px;
Height:auto;
Width:auto;
Display:block;
}
. framedivwarn{
Background-color: #FFFBE7;
border:1px solid #B5B5B5;
padding:2px;
height:100%;
Float:left;
}
. Framedivwarn input{
Background-color: #FFFFFF;
width:150px;
Float:left;
border:1px solid #FF0000;
}
. Framedivwarn div{
Color: #333333;
Float:left;
margin-right:5px;
margin-left:10px;
Height:auto;
Width:auto;
Display:block;
}
. framedivnormal{
border:1px solid #FFFFFF;
padding:2px;
height:100%;
Float:left;
Background-color: #FFFFFF;
}
. Framedivnormal input{
Background-color: #FFFFFF;
width:150px;
Float:left;
border:1px solid #999999;
}
. Framedivnormal div{
Color: #333333;
Float:left;
margin-right:5px;
margin-left:10px;
Height:auto;
Width:auto;
Display:block;
}
#checkBtn {
Float:left;
}
#checkDiv {
Color: #333333;
Float:left;
margin-right:5px;
margin-left:10px;
Height:auto;
Width:auto;
Display:block;
}
-->
</style>
<script language= "JavaScript" >
var icon = ' ';
var ns = ["usr", "pwd", "repwd", "eml"];
function Changeusr () {
if ($ ("checkbtn"). Disabled) $ ("checkbtn"). Disabled = false;
}
function Checkusr (s) {
var ma = [user name (3-16-bit)! "," The user name by the number, English, underline, the bar line composition! "];
if (!limitlen (s,3,16)) {
Showinfo ("usr", ma[0]);
return false;
}
if (!hasaccountchar (s)) {
Showinfo ("usr", ma[1]);
return false;
}
Showinfo ("usr");
return true;
}
function Checkpwd (s) {
var ma = [Password (5-16-bit)! "," The password cannot contain Chinese or full-width symbols! "," two times entered the password inconsistent! "];
Ps.update (s);
if (!limitlen (s,5,16)) {
Showinfo ("pwd", ma[0]);
return false;
}
if (Haschinesechar (s)) {
Showinfo ("pwd", ma[1]);
return false;
}
if (Limitlen ($F ("Repwdinput"), 5,16)) {
if (Trim ($F ("repwdinput")) = = Trim (s)) {
Showinfo ("pwd");
Showinfo ("Repwd");
return true;
}else{
Showinfo ("pwd", ma[2]);
return false;
}
}
Showinfo ("pwd");
return true;
}
function CheckPwd2 (s) {
var ma = ["Confirm Password (5-16-bit)!" "," The password cannot contain Chinese or full-width symbols! "," two times entered the password inconsistent! "];
if (!limitlen (s,5,16)) {
Showinfo ("Repwd", ma[0]);
return false;
}
if (Haschinesechar (s)) {
Showinfo ("Repwd", ma[1]);
return false;
}
if (Limitlen ($F ("Pwdinput"), 5,16)) {
if (Trim ($F ("pwdinput")) = = Trim (s)) {
Showinfo ("pwd");
Showinfo ("Repwd");
return true;
}else{
Showinfo ("Repwd", ma[2]);
return false;
}
}
Showinfo ("Repwd");
return true;
}
function Checkeml (s) {
var ma = [Please enter a common message!] "," the message format is not correct! "];
if (S.length < 5) {
Showinfo ("eml", ma[0]);
return false;
}
if (!isemail (s)) {
Showinfo ("eml", ma[1]);
return false;
}
Showinfo ("eml");
return true;
}
function Showinfo (n,s) {
var Fdo = $ (n+ "Framediv");
var ido = $ (n+ "Infodiv");
if (typeof s = = ' undefined ') {
Fdo.classname = "Framedivpass";
ido.innerhtml = "Fill in the correct!" ";
}else{
Fdo.classname = "Framedivwarn";
ido.innerhtml = icon + S;
}
}
//======================================================;
function Loadcheck () {
if (Trim ($F (' Usrinput ')). length = 0) return;
$ ("checkbtn"). Disabled = true;
var o = $ ("Checkdiv");
o.innerhtml = Getloadinfo ();
Loadajaxdata ("reg.asp", {usr: $F (' usrinput ')},successcheck,errorcheck);
}
function Successcheck (v) {
var o = $ ("Checkdiv");
o.innerhtml = getcheckhtml (V.responsetext);
}
function Errorcheck () {
$ ("checkbtn"). Disabled = false;
var o = $ ("Checkdiv");
o.innerhtml = GetErrorInfo ();
}
function getcheckhtml (s) {
s = (s = = "1")? "Congratulations, user name can be registered!" ":" Sorry, the username has been registered! ";
return s;
}
//======================================================;
function Getloadinfo () {
Return ' Loading Data ... '
}
function GetErrorInfo () {
Return ' Data loading failed! ';
}
//======================================================;
function Initpage () {
for (Var i=0;i<ns.length;i++) {
$ (ns[i]+ "Input"). Value = "";
}
}
</script>
<body onload= "Initpage ();" >
<table width= "100%" border= "0" cellpadding= "5" cellspacing= "1" bgcolor= "#CCCCCC" >
<tr>
<th width= "20%" bgcolor= "#EEEEEE" scope= "Row" > Username </th>
&LT;TD bgcolor= "#FFFFFF" ><div class= "Framedivnormal" id= "Usrframediv" ><input name= "UsrInput" type= "text "Id=" Usrinput "maxlength=" "onkeyup=" checkusr (This.value); Changeusr (); "Onfocus=" checkusr (this.value); " >
<div id= "Usrinfodiv" ></div>
</div></td>
</tr>
<tr>
<th bgcolor= "#EEEEEE" scope= "Row" >&nbsp;</th>
&LT;TD bgcolor= "#FFFFFF" ><input name= "checkbtn" "type=" button "id=" checkbtn "onclick=" Loadcheck (); "Value=" Detect if user name is available "> <div id=" Checkdiv "></div></td>
</tr>
<tr>
<th bgcolor= "#EEEEEE" scope= "row" > Password strength </th>
&LT;TD bgcolor= "#FFFFFF" >
<script language= "JavaScript" >
var ps = new Passwordstrength ();
Ps.setsize ("200", "22");
</script>
</td>
</tr>
<tr>
<th bgcolor= "#EEEEEE" scope= "row" > Password </th>
&LT;TD bgcolor= "#FFFFFF" ><div class= "Framedivnormal" id= "Pwdframediv" ><input name= "PwdInput" type= " Password "id=" Pwdinput "maxlength=" "onkeyup=" Checkpwd (this.value); "Onfocus=" checkpwd (this.value); " >
<div id= "Pwdinfodiv" ></div>
</div></td>
</tr>
<tr>
<th bgcolor= "#EEEEEE" scope= "row" > Confirm password </th>
&LT;TD bgcolor= "#FFFFFF" ><div class= "Framedivnormal" id= "Repwdframediv" ><input name= "RepwdInput" type= " Password "id=" Repwdinput "maxlength=" "onkeyup=" CheckPwd2 (this.value); "Onfocus=" CheckPwd2 (this.value); " >
<div id= "Repwdinfodiv" ></div>
</div></td>
</tr>
<tr>
<th bgcolor= "#EEEEEE" scope= "Row" >EMail</th>
&LT;TD bgcolor= "#FFFFFF" ><div class= "Framedivnormal" id= "Emlframediv" ><input name= "EmlInput" type= "text "Id=" Emlinput "onfocus=" checkeml (this.value); "onkeyup=" checkeml (this.value); "Maxlength=" >
<div id= "Emlinfodiv" ></div>
</div></td>
</tr>
<tr>
<th bgcolor= "#EEEEEE" scope= "Row" >&nbsp;</th>
&LT;TD bgcolor= "#FFFFFF" ><input type= "Submission" name= "submit" value= "submitted" ></td>
</tr>
</table>
</body>


PS. This is a work, do not want to open, did not expect a lot of people want to, forget, I will be related to file a package, to provide you download research!

This article supporting source code