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

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

點擊注冊之后的頁面，

再來演示 不輸入的界面

點擊注冊的界面;

就會出現如下的結果：

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

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

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

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

onClick="doCheck();

）

 <tr>
                            <td colspan="2" >
                                <input class="btn btn-success" type="submit" 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" value="注冊" onClick="doCheck();" />

加入

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

既：

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

　　

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

總結

以上是生活随笔為你收集整理的如何避免提交页面，信息未填写完善 就出现注册成功提示 基于js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。