[JavaScript]使用JavaScript+CSS實現註冊頁面中檢驗兩次密碼輸入是否相同

經常會遇到這樣的需求，在使用者註冊賬戶的時候檢測使用者輸入是否合法，其中最簡單的就是檢驗兩次密碼輸入是否相同，如果調用後台檢測太過麻煩，下面給出前台使用JavaScript檢測兩次輸入是否相同的基本代碼，並用CSS控制排版。

頁面中的JS指令碼如下：

function check(){if(document.getElementById("password").value!=document.getElementById("password_check").value){document.getElementById("warning").innerHTML="   兩次密碼的輸入不一致";}else{document.getElementById("warning").innerHTML="   ";}}

頁面中的顯示內容HTML代碼如下：

<div id = "login"><p>使用者名稱稱：<input type="text" name="username" value="" id="username" maxlength="30" size="30" style="width:20%"  /></p><p>使用者密碼：<input type="password" name="password" value="" id="password" maxlength="30" size="30" style="width:20%"  /></p><p>確認密碼：<input type="password" name="password_check" value="" id="password_check" maxlength="30" size="30" style="width:20%" onblur="check()"  /><span id="warning">   </span></p><p>使用者郵箱<input type="text" name="email" value="" id="email" maxlength="30" size="30" style="width:20%"  /></p><input type="submit" name="mysubmit" value="我要登陸"  />   

CSS代碼如下：

#warning{position:absolute;color:red;font-size: 20px;font-weight: normal;font-style: normal;text-decoration: none;}

因為前面body的text-align設定成置中了，所以用CSS將隱藏提示的position設定成absolute（可以直接在HTML設定）這樣就不會影響整體布局了。