（轉）ajax在註冊用戶表單中的使用

時間 2019-11-11

標籤 ajax 註冊用戶表單使用欄目 Ajax 简体版

原文原文鏈接

注：文章轉自https://www.cnblogs.com/forever-xuehf/p/9036945.html

1.驗證用戶名是否被使用

2.獲取手機短信驗證碼

3.點擊表單中的圖片刷新，可實現刷新圖片驗證碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ajax在註冊用戶表單中的使用</title>
</head>
<body>
    <p>1.驗證用戶名是否被使用</p>
    <p>2.獲取手機短信驗證碼</p>
    <p>3.點擊表單中的圖片刷新，可實現刷新圖片驗證碼</p>
    <script>
    //1.給用戶名錶單元素後添加事件函數checkname()
        function Ajax(type,url,data,success,failed){
            //建立Ajax對象
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }
            var type =type.topperCase();
            //用於清除緩存
            var random=Math.random();
            if(typeof data=="object"){
                var str="";
                for(var key in data){
                   str +=key+'='+data[key] +'&';
                }
                data=str.replace(/&$/,'');
            }
            if (type=="GET"){
                if(data){
                    xhr.open('GET',url+'?'+data,true);
                }else{
                    xhr.open('GET',url+'?t='+random,true);
                }
                xhr.send();
            }else if(type=="POSt"){
                xhr.open('POST',url,true);
                xhr.setRequestHeader ("Content-type","app...");//設置請求頭信息
                xhr.send(data);
            }
            //處理返回數據
            xhr.onreadystatechange =function(){
                if(xhr.readystatechange ==4){
                    if(xhr.status==200){
                        success(xhr.responseText );
                    }else{
                        if(failed){
                            failed(xhr.status);
                        }
                    }
                }
            }
        }
        function loading(){//請求慢時顯示加載中函數
            tipObj=document.getElementsById("tips");
            tipObj.style.display="block";
            tipObj.innerHTML ="加載中...";
        }
        function removeLoading(){//移除加載中函數效果
            tipObj=document.getElementsById("tips");
            tipObj.innerHTML ="";
            tipObj.style.display="none";
        }
        function checkName(){
            var name =document.getElementsById("username").value;
            if(isNull(name)){//輸入爲空時，離開該輸入框，則提示
                showTips("請輸入用戶名");
            }
            loading();//當輸入不爲空時，防止服務器響應慢時調用loading函數
            var sendData={username:name,action:'checkname'};
            Ajax('get','check.php',sendData ,function(data) {//發送Ajax請求，此處Ajax爲以前寫好的名爲Ajax的函數，其中有建立xmlHTTP對象到完整請求的過程
                removeLoading();//當Ajax請求發送成功時，移除加載中效果
                var user = eval('(' + data + ')');
                if (user.id) {
                    showTips("用戶名已被佔用，請從新輸入用戶名");
                }
                },function(data){
                showTips("Ajax請求錯誤");
            });
        }
    //2.給手機號短信驗證碼錶單元素添加函數checkMobile
        function checkMobile(s){//查詢驗證手機號碼是否合法
            var obj=document.getElementsById("usermobile");
            var regu=/^[1][3|4|5|8][0-9]{9}$/gi;
            var re=new RegExp(regu);
            if(!re.test(obj.value)){//若手機號有誤，則點擊獲取短信驗證碼的按鈕繼續隱藏
                showTips("手機號有誤，請從新輸入");
                var obj=document.getElementById("mobileben");
                obj.style.display="none";
                obj.disabled=true;
                return false;//反之顯示按鈕
            }
            var obj=document.getElementById("mobileben");
            obj.style.display="block";
            obj.disabled=false;
        }
        function getMobileCode() {
            var obj = document.getElementsById("usermobile");
            var regu = /^[1][3|4|5|8][0-9]{9}$/gi;
            var re = new RegExp(regu);
            if (!re.test(obj.value)) {
                showTips("手機號有誤，請從新輸入");
                return false;
            }
            sendData = {mobile: obj.value, action: "getcode"};
            Ajax("get", "check.php", sendData, function (data) {
                tipObj = document.getElementById("tips");
                tipObj.style.display = "block";
                tipObj.innerHTML = "手機驗證碼是：" + data;
            }, function (data) {
                showTips("手機驗證碼獲取錯誤");
            });
        }
    //3.點擊刷新圖片驗證碼添加函數changeCode
        function changeCode(){
            var url=document.getElementById("code").src;
            var rand=Math.floor(Math.random()*(1000+1));
            url+='?'+rand;//給獲取的src屬性後加一個生成的隨機數生成新的驗證碼圖片
            document.getElementById("code").src=url;//把新生成的驗證碼圖片賦值回去url
        }
    </script>
</body>
</html>