如何避免提交頁面,信息未填寫完善 就出現註冊成功提示 基於js
阿新 • • 發佈:2018-10-25
17. alert 界面 pre col doc 地址 word 進行
基於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>
此時 如果再沒有完善 就出出現以下錯誤
如何避免提交頁面,信息未填寫完善 就出現註冊成功提示 基於js