表單失去焦點時判斷是否符合條件 / 點提交時驗證輸入是否正確 / 即時提醒輸入是否正確

1、表單輸入框失去焦點的時候判斷用戶名是否符合條件

$("form:input").blur(function () {   //輸入框失去焦點的時候執行，form:input獲取表格的輸入框
    var $parent = $(this).parent();
    if ($(this).is("#username")) {
        if (this.value == "" || this.value.length < 6) {
            var errorMsg = "請輸入至少六位的用戶名";
            $parent.find(".formtips").remove();  //移除之前添加的提示信息
            $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");//如果輸入錯誤加onError的class，formtips代表提示信息的class
        } else {
            var okMsg = "輸入正確";
            $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
        }
    }
});

 

2、點擊提交按鈕的時候驗證全部的信息

$("#send").click(function () {
    $("form:input").trigger("blur"); //點擊提交按鈕的時候主動觸發輸入框失去焦點事件
    var numError = $(".form .onError").length;  //numError為錯誤提示信息的數量
    if (numError) {
        return false;  //如果有錯誤信息就不提交
    }
});

 

3、即時提醒

$("form:input").blur(function () {   
    //輸入框失去焦點的時候執行的函數
}).keyup(function () {  //keyup：松開按鍵的時候觸發
    $(this).triggerHandler("blur");  //triggerHandler：只觸發元素綁定的blur事件而不觸發瀏覽器默認的blur事件，否則不能將光標定位到文本框上
}).focus(function () {
    $(this).triggerHandler("blur");  //光標定位到文本框上的時候也進行判斷
});