簡單驗證兩次密碼輸入是否相同

首先介紹需求：場景是用戶修改密碼，需要輸入兩次密碼以防手誤。這里需要驗證用戶兩次輸入密碼是否一致。

下面是HTML頁面代碼

<tr>
    <td>新密碼</td>
    <td><input type="password" id="NewStaffPwd1" name="NewPwd" required="required" class="onlyNumAlpha" onkeyup="KeyUp()" /></td>
</tr>
<tr>
    <td>重復新密碼</td>
    <td><input type="password" id="NewStaffPwd2" required="required" class="onlyNumAlpha" onkeyup="KeyUp()" /></td>
</tr>
<tr>
    <td colspan="2"><input type="submit" id="btnSave" value="修改" /></td>
</tr>
<tr>
    <td colspan="2">
        <span id="errorMsg"></span>
    </td>
</tr>

 

簡單解釋一下與本主題無關的標簽屬性：

name="NewPwd"這里是后台需要接收最終用戶的新密碼所需要的屬性。因為我們已經保證兩次輸入一致，所以獲取任何一個都可以。

required="required"這個屬性保證了這里輸入的文本為必填

class="onlyNumAlpha"這里的類選擇器保證該輸入框只能輸入字母和數字

<span id="errorMsg"></span>這個是提交后后台返回錯誤信息的地方

//寫到這里的時候，強迫症的我發現代碼沒有對齊，於是重新插入編輯了一下。

下面是正題

1.注意綁定的事件必須是onKeyUp 不能是onKeyDown或者onKeyPress 這里我們的驗證要在用戶按鍵彈回的時候驗證，不能在用戶的數據輸入之前驗證。就是說文本框得到數據是在Down之后，Up之前；
2.Javascript代碼的使用。區分屬性和方法。下面上代碼。

function KeyUp() {
            var a = $('#NewStaffPwd1').val();
            //alert(a);
            var b = $('#NewStaffPwd2').val();
            //alert(b);
            if (a == b) {
                $('#btnSave').removeAttr('disabled');
            }
            else {
                $('#btnSave').attr('disabled', 'disabled');
            }
        }

我的之前的錯誤是把val()方法當成了屬性，下面的alert可是幫了我大忙。不信你把val后面的括號去掉試試看alert顯示什么。

當然這里設置$('#btnSave')不可用以及令其可用的辦法還有很多。

 

PS:我在之前的代碼中已經先讓按鈕不可用了。