Note: Please indicate the source for reprinting (www.111cn.net)
Today, I have written an ajax + asp registration application. Let's talk about it.
It is divided into three parts: the first part is the reg.htm file, the second part is the js file, and the third part is the asp file. I will explain it one by one.
First glance at the first part of the reg.htm file:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<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 digits )! "," The user name is composed of numbers, English letters, underscores, and hyphens! "];
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 digits )! "," The password cannot contain Chinese characters or fullwidth symbols! "," The two passwords are 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 digits )! "," The password cannot contain Chinese characters or fullwidth symbols! "," The two passwords are 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 = ["enter frequently used emails! "," The email format is incorrect! "];
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 = "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, you can register your username! ":" Sorry, this user name 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>
</Head>
<Body onLoad = "initPage ();">
<Table width = "100%" border = "0" cellpadding = "5" cellspacing = "1" bgcolor = "# CCCCCC">
<Tr>
<Th width = "20%" bgcolor = "# EEEEEE" scope = "row"> user name </th>
<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); ">
<Div id = "usrInfoDiv"> </div>
</Div> </td>
</Tr>
<Tr>
<Th bgcolor = "# EEEEEE" scope = "row"> & nbsp; </th>
<Td bgcolor = "# FFFFFF"> <input name = "checkBtn" type = "button" id = "checkBtn" onClick = "loadCheck (); "value =" check whether the user name is available "> <div id =" checkDiv "> </div> </td>
</Tr>
<Tr>
<Th bgcolor = "# EEEEEE" scope = "row"> password strength </th>
<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>
<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); ">
<Div id = "pwdInfoDiv"> </div>
</Div> </td>
</Tr>
<Tr>
<Th bgcolor = "# EEEEEE" scope = "row"> Confirm password </th>
<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); ">
<Div id = "repwdInfoDiv"> </div>
</Div> </td>
</Tr>
<Tr>
<Th bgcolor = "# EEEEEE" scope = "row"> EMail </th>
<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 ">
<Div id = "emlInfoDiv"> </div>
</Div> </td>
</Tr>
<Tr>
<Th bgcolor = "# EEEEEE" scope = "row"> & nbsp; </th>
<Td bgcolor = "# FFFFFF"> <input type = "submit" name = "Submit" value = "submit"> </td>
</Tr>
</Table>
</Body>
</Html>
There is nothing to say about the reg.htm file.
Please continue to view: ajax Register Application 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
