如何避免提交頁面，信息未填寫完善 就出現注冊成功提示 基於js

基於bootstrip做好一個頁面后，出現如下效果圖

 

這個頁面是未經過任何后端處理的頁面，如果直接填寫一個用戶名 或者不填寫任何東西都可以注冊成功的，先來演示只輸入一個用戶名 就要可以注冊成功的。

 

點擊注冊之后的頁面，

 

 

再來演示 不輸入的界面

點擊注冊的界面;\

就會出現如下的結果：

-------------------------------------------------------------------------------------------------------------------------------------------------------------

針對以上情況 做出以下bug的處理

主要是將主要的username password email進行處理，將每一個分項后面加上各自的id

在注冊欄加入以下代碼：（關鍵代碼是加入   

onClick="doCheck();

）

 <tr>
                            <td colspan="2" >
                                <input class="btn btn-success" type="submit" style="width:100%" value="注冊" onClick="doCheck();" />
                            </td>
</tr>

　　

 

再咋頭節點中，加入相應的方法。

function doCheck() {
    var username = $("#username").val();
    var password = $("#password").val();
    var password2 = $("#password2").val();
    var email = $("#email").val();


    if(username=null || username.trim()==""){
        alert("請填寫用戶名");
        return false;
    }

    if(password=null || password.trim()==""){
        alert("請輸入正確的密碼");
        return false;
    }

    if (password==password2){
        alert("兩次密碼輸入不一樣")
        return false;
    }

    if(email=null || email.trim()==""){
        alert("請輸入正確的郵箱地址");
        return false;
    }


    return true;
}

　　

再來運行一邊，重新運行時，需要重啟服務器,結果還是和加與沒加是一樣的。原因就是因為 onclick 與 submit是不同組件。。。。還要在原有的基礎上 加一個onsubmit的方法，需要在原來的代碼上

<input class="btn btn-success" type="submit" style="width:100%" value="注冊" onClick="doCheck();" />

加入  

onclick="return doCheck()" onsubmit=""

既：

  <td colspan="2" >
                                <input class="btn btn-success" type="submit" style="width:100%" value="注冊" onclick="return doCheck()" onsubmit=""  />
  </td>

　　

 

此時 如果再沒有完善  就出出現以下錯誤