java-script简单语法练习Ajax程序-第五天

运用web-storm开发

1.Ajax程序,判断输入框内用户名在数据库有没有

<style type="text/css">
        #head1{
            margin: 0px auto;
            width: 80%;
            height: 105px;

        }
        .a1{
            float: left;
        }
        .a2{
            float: right;
            margin-right: 300px;
            margin-top: 30px;
        }
        #content{
            margin-top:5px;
            margin: 0px auto;
            width: 80%;
            border:1px solid #c0d8ea;
            height: 400px;
        }
        #content h2{
            margin-left: 120px;
        }
        #content .info{
            border-top:1px solid #ededed;
            margin-top: 5px;
        }
        #left{
            width:70%;
            float:left;
            font-size:15px;

        }

        #left table{
            margin-left:120px;
        }
        #left table tr{
            line-height:40px;
        }
        #right{
            width:28%;
            float:left;
            height:120px;
            border-left: 1px dotted #dddddd;
        }
        .btn{
            height: 29px;
            margin: 0 -13px;
            padding: 0 15px;
            line-height: 28px;
            font-size: 14px;
            font-weight: 700;
            padding-bottom: 2px;
            color:white;
            background-color:orange;
            outline: none;
        }
        #foot{
            margin: 0px auto;
            width: 80%;
            height: 30px;


        }
        ul li{
            list-style: none;
            float: left;
            text-align:center ;
            width: 90px;
        }
        ul li a{
            text-decoration: none;
        }
    </style>
    <script>
    //该函数是用来创建XMLHttpRequest对象的
        function createXMLHttpRequest(){
        	var xmlhttp;
        	if (window.XMLHttpRequest)
        	  {// code for IE7+, Firefox, Chrome, Opera, Safari
        	  xmlhttp=new XMLHttpRequest();
        	  }
        	else
        	  {// code for IE6, IE5
        	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        	  }
        	return xmlhttp;
        }
        var ifName=false;
        var ifPwd=false;
        var ifPwd1=false;
        var ifEmail=false;
        function checkName(obj){
        	//创建createXMLHttpRequest这个对象
    	xmlHttp=createXMLHttpRequest();
    	//第二步，向服务器请求数据
    	xmlHttp.open("GET","checkname.do?name="+obj.value,true);
    	xmlHttp.send(null);
    	//第三步，处理状态值发生改变的事件
    	xmlHttp.onreadystatechange=handleback;//客户端和服务器之间的交互状态发生改变的时候触发的函数
    	
        }
        
        //第四步，处理服务器发送给客户端的数据：
		function handleback(){
        	if(xmlHttp.readyState==4){
        		if(xmlHttp.status==200){ //浏览器的正常状态
        			//alert(xmlHttp.responseText);// responseText表示服务器过来的数据
        			if(xmlHttp.responseText==1){//说明接受到数据
        				document.getElementById("info").innerHTML="*用户名已存在";
        				alert("用户名已被注册!");
        				ifName=false;
        			}else{
        			
        			var objName=$$("txtUserName");
        			 if(objName.value.trim().length==0){
        			 ifName=false;
                	 $$("info").innerHTML="*用户名不能为空";
            		}
            		else{
            			var patterSpace=/\s+/;
                if(patterSpace.test(objName.value.trim())){
                  ifName=false;
                  $$("info").innerHTML="*用户名不能包含空格";
                }else{
                    ifName=true;
                    $$("info").innerHTML="<img src=\"images/register_write_ok.gif\"/>";
                }
            		}
        			}
        		}
        	}
        }//验证第一次输入的密码
        function checkPwd(){
        	var objPwd=$$("txtUserPwd");
        	if(objPwd.value.trim().length==0){
        		ifPwd=false;
        		$$("info1").innerHTML="*密码不能为空";
        	}else{
        		var patterSpace=/\s+/;//空格
        		if(patterSpace.test(objPwd.value.trim())){
        		    ifPwd=false;
        			$$("info1").innerHTML="密码中不能含有空格";
        		}else{
        			var patterNum=/^[0-9]*$/;//全数字
        			if(patterNum.test(objPwd.value.trim())){
        			    ifPwd=false;
        				$$("info1").innerHTML="不能全为数字";
        			}else{
        				var patterLet=/^[a-zA-Z]+$/;//全字母
        				if(patterLet.test(objPwd.value.trim())){
        					ifPwd=false;
        					$$("info1").innerHTML="不能全为字母";
        				}else{
        					ifPwd = true;
                            $$("info1").innerHTML = "<img src=\"images/register_write_ok.gif\"/>";
        				}
        			}
        		}
        	}
        }//验证第二次输入的密码
        function checkPwd1(){
        	var objPwd1=$$("txtUserRpPwd");
        	if(objPwd1.value.trim().length==0){
        	    ifPwd1=false;
                $$("info2").innerHTML="*密码不能为空";
            }else{
        	var objPwd=$$("txtUserPwd");
        	if(objPwd.value.trim()==objPwd1.value.trim()){
        		ifPwd1=true;
        		$$("info2").innerHTML="<img src=\"images/register_write_ok.gif\"/>";
            }else{
                ifPwd1=false;
                $$("info2").innerHTML="*两次密码不一致,请重新输入";
           }
          }
        }//验证输入的邮箱
        function checkEmail(){
        	var objEmail=$$("txtUserEmail");
        	if(objEmail.value.trim().length==0){
        		ifEmail=false;
        		$$("info3").innerHTML="Email不能为空";
        	}else{
        		var patterSpace=/\s+/;//提取空格
        		if(patterSpace.test(objEmail.value.trim())){
        			ifEmail=false;
        			$$("info3").innerHTML="不能含有空格";
        		}else{
        			var regPatter=/^\w+@\w+\.((com)|(cn)|(com\.cn))$/;
        			if(regPatter.test(objEmail.value.trim())){
        				ifEmail=true;
        			 $$("info3").innerHTML="<img src=\"images/register_write_ok.gif\"/>";
                    }else{
                    	ifEmail=false;
                        $$("info3").innerHTML="*输入email格式不对";
                    }
        		}
        	}
        }
    	function $$(id) {
			return document.getElementById(id);
		}//检查所有都成功了才能提交
		function checkall() {
			if(ifName&&ifPwd&&ifPwd1&&ifEmail){
			return true;
			}
			else{
			return false;
			}
		}
    </script>
  </head>
  
  <body>
    <div id="head1">
    <div class="a1">
        <img src="images/baidu.png"/>
    </div>
    <div class="a2"><h2>欢迎来到百度贴吧,这里是你畅所欲言的地方</h2></div>
</div>
<div id="content">
    <h2>注册百度账号</h2>
    <div class="info">
    </div>
    <div id="left">
    <form name="form1" action="reg.do" method="get">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" οnblur="checkName(this)" id="txtUserName" name="txtUserName"/><span id="info" style="color:red"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" οnblur="checkPwd()" id="txtUserPwd" name="txtUserPwd"/><span id="info1" style="color:red"></span></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" οnblur="checkPwd1()" id="txtUserRpPwd" name="txtUserRpPwd"/><span id="info2" style="color:red"></span></td>
            </tr>
            <tr>
                <td>电子邮箱：</td>
                <td><input type="text" οnblur="checkEmail()" id="txtUserEmail" name="txtUserEmail"/><span id="info3" style="color:red"></span></td>
            </tr>
            <tr>
                <td colspan="2" style="padding-left:140px">
                    <input type="submit" value="提交注册" οnclick="return checkall()" class="btn" name="txtUserName"/>
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div id="right">
        <p>我已注册？马上就</p>
        <a href="login.jsp"><input type="button" value="登陆"/></a>
        <img src="images/zhuce.png"/>
    </div>
</div>
<div id="foot">
    <div>
        <ul>
            <li><a href=""> 关于百度</a></li>
            <li><a href="">广告服务</a></li>
            <li><a href="">百度客服</a></li>
            <li><a href="">隐私和版权</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">加入百度</a></li>
        </ul>
    </div>
    <div>
        <img src="images/beian.png"/>
    </div>
</div>
  </body>
</html>