Ajax Authentication User Name

Ajax validation Article I have written a lot of oh, I'll write an Ajax to check the user name tutorial, all posted up.

Here is the interface effect picture, we mainly have three articles a reg.php inside almost is the HTML code, one is the register.php registration file, a chech.js file, and the last ajax_check.php file, to complete this Ajax User detection is going to use the above four articles below let's take a look at the interface code first.

CSS and JS code. Import

<style type= "Text/css" >
<!--
body,td,th {
font-size:12px;
}
#error {color: #FF0000; Background-image:url (images/1.jpg); height:26px; padding-top:10px;padding-left:50px;width : 277px;}
. Defult{color: #333333; Background-image:url (images/3.jpg); height:26px; padding-top:10px;padding-left:50px;width : 277px;}
#success {
Background-image:url (images/0.jpg);
Background-repeat:no-repeat;

height:26px;
}
. input{height:18px; width:221px;}
. STYLE1 {color: #FF0000}
. black_overlay{
Display:none;
Position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
Background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
Filter:alpha (OPACITY=50);
}
. white_content {
Display:none;
Position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
border:1px solid #000000;
Background-color:white;
z-index:1002;
Overflow:auto;
padding:5px;
}
. close{height:15px; text-align:right; margin-bottom:10px;}
A
font-size:12px;
Color: #000000;
}
a:visited {
Color: #000000;
}
a:active {
Color: #000000;
}
-->
</style>
<script language= "javascript" src= "Js/check.js" ></script>

Here is the HTML representation code

<table width= "border=" 0 "align=" center "cellpadding=" 0 "cellspacing=" 0 ">
<form id= "Form1" Name= "Form1" method= "Post" action= "register.php" >
<tr>
&LT;TD width= "137" >&nbsp;</td>
&LT;TD width= "height=" >&nbsp;</td>
&LT;TD width= "229" >&nbsp;</td>
&LT;TD width= "417" >&nbsp;</td>
</tr>
<tr>
&LT;TD align= "Right" > Johnny &nbsp;&nbsp; said:</td>
&LT;TD height= "align=" "Center" ><span class= "STYLE1" >*</span></td>
<td><input name= "UID" type= "text" class= "input" id= "UID" onblur= "return Ajax ();" Onfocus= "return C ();" Size= "/></td>"
&LT;TD align= "left" id= "U_info" ><div class= "Defult" > user nickname length 3-12 characters </div></td>
</tr>
<tr>
&LT;TD align= "right" > Sex &nbsp;&nbsp;:</td>
&LT;TD height= "align=" "Center" ><span class= "STYLE1" >*</span></td>
<td>
<label></label> <label>
<select name= "Sex" id= "sex" >
<option value= "1" > Male </option>
<option value= "0" > Women </option>
</select>
</label></td>
&LT;TD align= "left" >&nbsp;</td>
</tr>
<tr>
&LT;TD align= "Right" > Secret &nbsp;&nbsp; code:</td>
&LT;TD height= "align=" "Center" ><span class= "STYLE1" >*</span></td>
<td><input name= "password2" type= "password" class= "input" id= "Password2" onblur= "C" (); "Size="/></ Td>
&LT;TD align= "left" id= "P_info" ><div class= "Defult" > Length 6-12 bits </div></td>
</tr>
<tr>
&LT;TD align= "Right" > Confirm password:</td>
&LT;TD height= "align=" "Center" ><span class= "STYLE1" >*</span></td>
<td><input name= "password" type= "password" class= "input" id= "password" onblur= "C" (); "Size="/></td >
&LT;TD align= "left" id= "P_info1" ><div class= "defult" > Confirm password </div></td>
</tr>
<tr>
&LT;TD align= "Right" > Hand &nbsp;&nbsp; Machine:</td>
&LT;TD height= "align=" "Center" ><span class= "STYLE1" >*</span></td>
<td><input name= "Mo" type= "text" class= "input" id= "Mo" onblur= "C" (); "Size="/></td>
&LT;TD align= "left" id= "M_info" ><div class= "Defult" > Mobile phone 13875888888 with landline (0731-888888) </div></td>
</tr>
<tr>
&LT;TD align= "Right" > real name:</td>
&LT;TD height= "align=" "Center" ><span class= "STYLE1" >*</span></td>
<td><input name= "name" type= "text" class= "input" id= "name" onblur= "C (); size="/></td> "
&LT;TD align= "left" id= "N_info" ><div class= "Defult" > real name: Xiao Ming </div></td>
</tr>
<tr>
&LT;TD height= ">&nbsp;</td>"
&LT;TD height= ">&nbsp;</td>"
<td><label>
<input name= "Check_name" type= "checkbox" id= "Check_name" value= "1" checked= "checked"/>
<a href= "javascript:void (0)" onclick= "document.getElementById (' Light '). style.display= ' block '; document.getElementById (' fade '). style.display= ' Block ' >
I accept the terms of service
</a>
</label></td>
&LT;TD id=t_info>
<div id= "Light" class= "white_content" >
<div class= "Close" >
<a href= "javascript:void (0)" onclick= "document.getElementById (' Light '). style.display= ' None '; document.getElementById (' fade '). style.display= ' None ' ">
Close </a>
</div>
<div style= "margin:10px;" >
For the contents of the clause!
</div>
</div> </td>
</tr>
<tr>
&LT;TD height= ">&nbsp;</td>"
&LT;TD height= ">&nbsp;</td>"
<td><label>
<input type= "image" Name= "ImageField" id= "ImageField" src= "images/btn.jpg" onclick= "Javascript:return" C (); " />
</label></td>
<td>&nbsp;</td>
</tr>
</form>
</table>

Original site: www.111cn.net/phper/php.html