1. 程式人生 > >留言板驗證js+php+mySQL

留言板驗證js+php+mySQL

//表單驗證
function verify(){
    //form提交之前先判空
    var mfzdlj = $(".mfzdlj").val().trim();
    var mfname = $("#mfuser").val().trim();
    var mfphone =$("#mfphone").val().trim();

    if(mfzdlj==""){
        tip("店鋪連結不能為空!");
        return false;
    }   
    if(mfname == ""){
        tip("姓名不能為空!");
        return false;
    }   
    if(mfphone==""){
        tip("手機不能為空");
        return false;
    }
}
//底部業務資訊判斷
function ywzx(){
    //form提交之前先判空
    var ywusers = $("#ywusers").val().trim();
    var ywnums = $("#ywnums").val().trim();
    if(ywusers==""){
        tip("姓名不能為空!");
        return false;
    }else if(!CheckChinese(ywusers)){
        //console.log(CheckChinese(ywusers))
        tip("姓名必須是中文!");
        return false;
    }
    if(ywnums == ""){
        tip("聯絡方式不能為空");
        return false;
    }
}
//正則表示式中文驗證:
function CheckChinese(str){
    var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
    return reg.test(str);

}
//底部ajax資料提交
function postFrom(e){
    e.preventDefault();
    var str = document.getElementById("ywusers").value;
    var age2 = document.getElementById("ywnums").value;
    //console.log(age2);
    var params ="users="+str+"&"+"nums="+age2;
    //var params ="name="+str;
    var xhr = new XMLHttpRequest();
    xhr.open("POST","send.php",true);
    //設定請求頭
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.onload = function(){
        //console.log(this.responseText);
        tip("留言成功");
        ywzx();
    }
    xhr.send(params);
};
//店鋪免費診斷
function mpostFrom(e){
    e.preventDefault();
    var mfuser = document.getElementById("mfuser").value;
    var mfphone = document.getElementById("mfphone").value;
    var mfzdlj = document.querySelector(".mfzdlj").value;
    //console.log(age2);
    var params ="txt="+mfzdlj+"user="+mfuser+"&"+"num="+mfphone;
    //var params ="name="+str;
    var xhr = new XMLHttpRequest();
    xhr.open("POST","comment.php",true);
    //設定請求頭
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.onload = function(){
        //console.log(this.responseText);
        tip("留言成功");
        verify();
    }
    xhr.send(params);
};
//彈窗
function tip(cnbtxt){
    var tip = document.querySelector(".tip");
    var tipClose = document.querySelector(".tip-close");
    var tipmark = document.querySelector("#mark");
    var tipTxt = document.querySelector(".tip-txt");
    var Que = document.querySelector(".que");
    tipTxt.innerHTML = cnbtxt;
    tip.style.display = "block";
    tipmark.style.display = "block";
    tipClose.onclick = function(){
        tipclose();
    };
    Que.onclick = function(){
        tipclose();
    }
    function tipclose(){
        tip.classList.add('tipon');
        tip.addEventListener('animationend',function(){
             //動畫結束,移除動畫的樣式類
             tip.classList.remove('tipon');
             tip.style.display = "none";
             tipmark.style.display = "none";
             document.getElementById("mfuser").value ="";
             document.getElementById("mfphone").value="";
             document.querySelector(".mfzdlj").value ="";
        });
    }
}

 

 

//底部業務資訊ajax資料提交
    var opostFrom = document.querySelector("#postFrom");
     opostFrom.addEventListener("submit",postFrom,true);
     //店鋪免費診斷ajax資料提交
     var mPostFrom = document.querySelector("#mpostFrom");
    mPostFrom.addEventListener("submit",mpostFrom,true);