ajax验证用户名
ajax验证文章我以前写过很多哦,下面我再来写一个ajax检查用户名的教程吧,全部贴上来.
这里是界面效果图片,我们主要有三个文章一个reg.php里面几乎是html 代码,一个是register.php注册文件,一个是否chech.js文件,还有最后一个ajax_check.php文件,要完成这次ajax 用户检测就要用到上面四个文章下面我们就先来看看界面代码吧.
css 与js代码.导入
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
#error{color:#FF0000; background-image:url(http://pic2.phprm.com/2015/07/04/1.jpg); height:26px; padding-top:10px;padding-left:50px;width:277px;}
.defult{color:#333333; background-image:url(http://pic2.phprm.com/2015/07/04/3.jpg); height:26px; padding-top:10px;padding-left:50px;width:277px;}
#success{
background-image:url(http://pic2.phprm.com/2015/07/04/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>
这里是html表现代码
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<form id="form1" name="form1" method="post" action="register.php">
<tr>
<td width="137"> </td>
<td width="17" height="27"> </td>
<td width="229"> </td>
<td width="417"> </td>
</tr>
<tr>
<td align="right">昵 称：</td>
<td height="34" align="center"><span class="STYLE1">*</span></td>
<td><input name="uid" type="text" class="input" id="uid" onblur="return ajax();" onfocus="return c();"size="20" /></td>
<td align="left" id="u_info"><div class="defult">用户昵称长度3-12个字符</div></td>
</tr>
<tr>
<td align="right">性 别：</td>
<td height="34" align="center"><span class="STYLE1">*</span></td>
<td>
<label></label> <label>
<select name="sex" id="sex">
<option value="1">男</option>
<option value="0">女</option>
</select>
</label></td>
<td align="left"> </td>
</tr>
<tr>
<td align="right">密 码：</td>
<td height="34" align="center"><span class="STYLE1">*</span></td>
<td><input name="password2" type="password" class="input" id="password2" onblur="c();" size="20" /></td>
<td align="left" id="p_info"><div class="defult">长度6-12位</div></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td height="34" align="center"><span class="STYLE1">*</span></td>
<td><input name="password" type="password" class="input" id="password" onblur="c();" size="20" /></td>
<td align="left" id="p_info1"><div class="defult">确认密码</div></td>
</tr>
<tr>
<td align="right">手 机：</td>
<td height="34" align="center"><span class="STYLE1">*</span></td>
<td><input name="mo" type="text" class="input" id="mo" onblur="c();" size="20" /></td>
<td align="left" id="m_info"><div class="defult">手机13875888888与座机（0731-888888）</div></td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td height="34" align="center"><span class="STYLE1">*</span></td>
<td><input name="name" type="text" class="input" id="name" onblur="c();" size="20" /></td>
<td align="left" id="n_info"><div class="defult">真实姓名：小明</div></td>
</tr>
<tr>
<td height="34"> </td>
<td height="27"> </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'">
我接受服务条款
</a>
</label></td>
<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'">
关闭</a>
</div>
<div style="margin:10px;">
为里是条款内容！
</div>
</div> </td>
</tr>
<tr>
<td height="60"> </td>
<td height="27"> </td>
<td><label>
<input type="image" name="imageField" id="imageField" src="images/btn.jpg" onclick="javascript:return c();"/>
</label></td>
<td> </td>
</tr>
</form>
</table>
本站原创: http://www.phprm.com
本文地址：http://www.phprm.com/code/24f2d6db97a0d4dca1cb6003d4b4d2e9.html
转载随意，但请附上文章地址:-)