基于HTML5的网络课堂前端设计
}
if(ip[0].value==''){ }
else if(isNaN(ip[0].innerHTML)){ }
else if(ip[0].value.length<8||ip[0].value.length>12){ }
alert('密码由8-12位纯数字组成'); alert('密码由8-12位纯数字组成'); ip[0].value='请输入密码';
ip[1].onfocus=function(){ }
ip[1].onblur=function(){ }
if(ip[1].value==''){ }
ip[1].value='请确认密码'; if(ip[1].value=='请确认密码'){ }
ip[1].value='';
2. 登录界面
图4-2 登录界面
15
洛阳师范学院2016届本科生毕业设计
登录的基本代码：
“登录”按钮事件代码如下:
header('Content-type:text/html;charset=utf-8'); mysql_connect('localhost','root',''); mysql_select_db('student'); mysql_query('set names utf8'); $pn=$_GET['phonenumber']; $password=$_GET['password'];
$opt=\$opt1=\$res=mysql_query($opt); $res1=mysql_query($opt1); $row=mysql_fetch_array($res); $row1=mysql_fetch_array($res1); if((int)$row[0]>0){ } else{ } ?>
Ajax部分（实现数据库数据的提取）： function dengl(){
if($row[0]==$pn&&$row1[0]==$password){ } else{ }
echo \密码错误，请重新输入'}\echo \密码验证通过，欢迎登录'}\
echo \此用户不存在'}\
if(inp[0].value.length<11||inp[1].value.length<8){ }
else if(inp[0].value.length==11&&inp[1].value.length>=8){
p1.style.display='none';
16
p1.style.display='block';
基于HTML5的网络课堂前端设计
var xml=new XMLHttpRequest();
xml.open('get','delu.php?phonenumber='+inp1.value+'&password='+inp2.value }
}
xml.send();
xml.onreadystatechange=function(){ }
inp[0].value=''; inp[1].value='';
if(xml.readyState==4){ }
if(xml.status==200){ }
var ss=eval('('+xml.responseText+')'); if(ss.cod==1){ } else{ }
alert(ss.msg);
window.open('http://localhost/kxkt/ydl.html');
,true);
3.忘记密码重置界面：
图4-3忘记密码重置界面
17
洛阳师范学院2016届本科生毕业设计
Ajax访问服务器，提取数据部分：
function zhanghuming(){ }
var xhr=new XMLHttpRequest();
xhr.open('get','zhuce.php?phonenumber='+inp[0].value,true); xhr.send();
xhr.onreadystatechange=function(){ }
if(xhr.readyState==4){ }
if(xhr.status==200){ }
//console.log(xhr.responseText); var ss=eval('('+xhr.responseText+')'); if(ss.err==0){ } else{ }
alert('此帐号不存在');
if(inp[1].value==inp[2].value){ } else{ }
alert('验证码输入有误'); bd2.style.display='none'; bd3.style.display='block'; lis[0].className=''; ap[0].style.color=\img[0].src='image/list'+11+'.png'; lis[1].className='coll'; ap[1].style.color='blue';
img[1].src='image/list'+22+'.png'; ipt[0].value=inp[0].value;
重置密码：
function setmima(){
18
基于HTML5的网络课堂前端设计
if(inn[0].value!=inn[1].value){ } else{
var xml=new XMLHttpRequest(); alert('密码不一致');
xml.open('get','changepw.php?newpassword='+inn[1].value+'&phonenumber='+i }
}
xml.send();
xml.onreadystatechange=function(){ }
if(xml.readyState==4){ }
if(xml.status==200){ }
var ss=eval('('+xml.responseText+')'); console.log(ss); if(ss.cod){ }
bd4.style.display='none'; bd5.style.display='block'; lis[2].className=''; ap[2].style.color='';
img[2].src='image/list'+3+'.png'; lis[3].className='coll'; ap[3].style.color='blue';
img[3].src='image/list'+44+'.png';
np[0].value,true);
密码格式的验证：
inn[0].onblur=function(){
if(inn[0].value==''){ }
else if(isNaN(inn[0].innerHTML)){
19
inn[0].value='新的密码';