iT邦幫忙

0

onblur 裡不能放特定的function 問題 求解~~

剛開始學js 跟 jq
這問題困擾小弟很久 麻煩各位大大看看了
目前自學程式中 程式碼傷眼請見諒/images/emoticon/emoticon25.gif


問題描述

主要有PasswordChecing();RePassword();openbtn() 三個function
前兩個正常使用 但只有openbtn不能放入onblur
但若去consloe 直接打 是沒有問題的


chorme consloe 報錯
Uncaught TypeError: openbtn is not a function at HTMLInputElement.onblur


---html---

<div class="form-group2">
    <input type="password"  
    id="exampleInputPassword1" 
    name="InputPassword1" 
    onblur='PasswordChecing();RePassword();openbtn()'>                
</div>

---js---

$(document).ready(function () {
    $(".closebar").click(function () {
        $(".alert").slideUp(1000);
    });
});

//註冊資料判斷
function EmailChecking() {
    var Obj = document.getElementById("exampleInputEmail1");
    var email = Obj.value;
    var i = email.length;
    var temp = email.indexOf('@');
    var tempd = email.indexOf('.');
    if (temp > 1) {
        if ((i - temp) > 3) {
            if ((i - tempd) > 0) {
                console.log("信箱對");
                document.getElementById("emailHelp").innerHTML = "看起來不錯 !! ";
                document.getElementById("emailHelp").style.color = "green";
                $(document).ready(function () {
                    $('.form-group1').addClass('was-validated');
                });
                return 1;
            }
        }
    }
    console.log("信箱不對");
    document.getElementById("emailHelp").innerHTML = "信箱錯誤!! 請填寫正確的信箱,以利帳號認證";
    document.getElementById("emailHelp").style.color = "red";
    $(document).ready(function () {
        $('.form-group1').removeClass('was-validated');
    });
    return 0;
}
//密碼資料判段
var Check = 0;
function PasswordChecing() {
    var Obj = document.getElementById("exampleInputPassword1");
    var pwd = Obj.value;
    var i = pwd.length;
    if (pwd.match(/\d/) && pwd.match(/[a-z]/i) && i > 7 && i < 20 && !pwd.match(/[^a-z0-9]/)) {
        console.log("yes");
        document.getElementById("passwordHelp").innerHTML = "密碼可以使用!!";
        document.getElementById("passwordHelp").style.color = "green";
        $(document).ready(function () {
            $('.form-group2').addClass('was-validated');
        });
        return 1;
    } else {
        console.log("no");
        document.getElementById("passwordHelp").innerHTML = "請輸入八個字以上的英文數字組合,麻煩再次確認 ";
        document.getElementById("passwordHelp").style.color = "red";
        $(document).ready(function () {
            $('.form-group2').removeClass('was-validated');
        });
        return 0;
    }
}
//檢查密碼驗證
function RePassword() {
    var Obj1 = document.getElementById("exampleInputPassword1");
    var pwd1 = Obj1.value;
    var Obj2 = document.getElementById("exampleInputPassword2");
    var pwd2 = Obj2.value;
    if (pwd1 == pwd2) {
        console.log("密碼驗證正確!");
        $(document).ready(function () {
            $('#repasswordHelp').html('密碼驗證正確!').css('color', 'green');
            $('.form-group3').addClass('was-validated');
        });
        return 1;
    }
    else {
        $(document).ready(function () {
            $('#repasswordHelp').html('密碼驗證錯誤').css('color', 'red');
            $('.form-group3').removeClass('was-validated');
        });
        console.log("密碼驗證錯誤!");
        return 0;
    }
}

function openbtn() {
    if (EmailChecking() == 1 && PasswordChecing() == 1 && RePassword() == 1) {
        $("#openbtn").removeClass("disabled");
        alert("okokokokookoko");
    }
    else {
        alert("nononono");
    }
}
QQ556 iT邦新手 5 級 ‧ 2019-02-25 15:53:02 檢舉
感謝yoching解答
解決方式:
將html <div>裡的blur拿掉並用jquery的blur事件來控制~

$("#exampleInputPassword1,#exampleInputPassword2,#exampleInputEmail1").blur(function () {
PasswordChecing();
RePassword();
openbtn();
});
});

2 個回答

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-02-25 15:25:23
最佳解答

其實你的問題是在於你是在未載入完成前運行。

你不該從你的div中直接下達onblur
因為你所運作的程式碼。都是需要在頁面載入完成才能動作的。

所以正確的做法是。你即然已經用了jquery。
那就用jqueery的特性
把你這一段的程式碼。改成

$(document).ready(function () {
    $(".closebar").click(function () {
        $(".alert").slideUp(1000);
    });
    $("#exampleInputPassword1").blur(function(){
        PasswordChecing();
        RePassword();
        openbtn();
    });
});

再將onblur那段給拿掉。
這樣的做法是確保頁面載入完成後。才去綁定blur事件。

QQ556 iT邦新手 5 級 ‧ 2019-02-25 15:48:37 檢舉

感謝大大的幫助
小弟的疑問已經解決了 謝謝!!!/images/emoticon/emoticon02.gif

1
bizpro
iT邦大師 1 級 ‧ 2019-02-25 21:17:09

您的問題並非因為DOM未完成. 而是變數的範圍和變數的不明確.

在您的HTML中:

<div class="form-group2">
    <input type="password"  
    id="exampleInputPassword1" 
    name="InputPassword1" 
    onblur='PasswordChecing();RePassword();openbtn()'>                
</div>

從您的Javasctipt中的function openbtn()的$('#openbtn')可以看見您有一個HTML元件的ID也是openbtn, 兩個一樣的名稱, 且都在Global的變數範圍中, 造成變數與涵式的混淆. 因此出現openbtn is not a function的錯誤.
那為什麼用jQuery的ready可以解決問題? 不是JQuery的ready解決了問題, 也不是使用了JQeury的blur. 而是您用無名涵式包住了openbtn();, 改變了openbtn()變數範圍:

function () {
PasswordChecing();
RePassword();
openbtn();
}

事實上, 您只須:

<div class="form-group2">
    <input type="password"  
    id="exampleInputPassword1" 
    name="InputPassword1" 
    onblur='function(){PasswordChecing();RePassword();openbtn();}'>                
</div>

或用不同的名稱.

QQ556 iT邦新手 5 級 ‧ 2019-02-27 02:37:55 檢舉

原來是這樣喔!!
感謝大大的指導/images/emoticon/emoticon02.gif
大家都花時間幫忙看問題
我太感動~

我要發表回答

立即登入回答