剛開始學js 跟 jq
這問題困擾小弟很久 麻煩各位大大看看了
目前自學程式中 程式碼傷眼請見諒
問題描述
主要有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");
}
}
其實你的問題是在於你是在未載入完成前運行。
你不該從你的div中直接下達onblur
因為你所運作的程式碼。都是需要在頁面載入完成才能動作的。
所以正確的做法是。你即然已經用了jquery。
那就用jqueery的特性
把你這一段的程式碼。改成
$(document).ready(function () {
$(".closebar").click(function () {
$(".alert").slideUp(1000);
});
$("#exampleInputPassword1").blur(function(){
PasswordChecing();
RePassword();
openbtn();
});
});
再將onblur那段給拿掉。
這樣的做法是確保頁面載入完成後。才去綁定blur事件。
您的問題並非因為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>
或用不同的名稱.