2010-12-12 35 views
6

Tôi đang mắc kẹt trên những gì tôi nghĩ là một lỗi PEBCAK đơn giản về phía tôi. Tôi đang cố gắng xác minh tất cả các chức năng của tôi là đúng trước khi tôi gửi một mẫu đơn, nhưng không thể tìm ra được cuộc sống của tôi có gì sai. Dưới đây là mã javascript của tôi:Kiểm tra xem nhiều chức năng có đúng không, sau đó làm điều gì đó

function checknewaccount(){ 
if(emailvalid()&& checkname() && passwordcheck()) 
{ 
    return true; 
} 
else{ 
    return false; 
} 
} 


function emailvalid() 
{ 
     if(email condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

function checkname()) 
{ 
     if(name condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

function passwordcheck(){ 
     if(password condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

html dưới đây:

<form id="newaccount" name="newaccount" method="post" onSubmit="accountcode.php"> 
<input type="text" id="email" onBlur="emailvalid()"/> 
<input type="text" id="username" onBlur="checkname()" /> 
<input type="password" id="password" onkeyup="passwordcheck()"/> 
<input type="submit" value="New" onClick="return checknewaccount()"/> 
</form> 

Khi tôi bấm vào nút "New, không có gì xảy ra, và tôi biết accountcode.php không chạy, bởi vì không có gì xảy ra trên cơ sở dữ liệu cuối và không có lỗi được báo cáo.

tóm lại, câu hỏi của tôi là như thế nào checknewaccount() không hoạt động? Liệu nó có cái gì để làm với cách tôi gọi họ?

tôi một m mới để javascript vì vậy nếu tôi hoàn toàn tắt trên thực hiện của tôi, tôi xin lỗi. Cảm ơn bạn rất nhiều vì sự giúp đỡ!

+0

Ok xin lỗi tôi đã xóa mã của mình trong câu hỏi và tôi hy vọng điều đó có ý nghĩa hơn với mọi người. Xin lỗi về điều đó trước đó. – Siriss

+0

gợi ý hữu ích nếu bạn muốn đánh dấu 'đoạn mã' trong nhận xét, sử dụng dấu gạch chéo '(bên trái 1 trên kbd) trước và sau mã – Basic

Trả lời

4

bạn đã nhận được cú pháp biểu mẫu sai - onsubmit = tên của hàm js để gọi, action = url ...

<form action="accountcode.php" id="newaccount" name="newaccount" method="post" onSubmit="return checknewaccount()"> 
<input type="text" id="email" onBlur="emailvalid()"/> 
<input type="text" id="username" onBlur="checkname()" /> 
<input type="password" id="password" onkeyup="passwordcheck()"/> 
<input type="submit" value="New"/> 
</form> 

đang được thử nghiệm đầy đủ:

<html> 
    <head> 
     <script type="text/javascript"> 
     function checknewaccount() { 
      return emailvalid() && checkname() && passwordcheck(); 
     } 

     function emailvalid() { 
      var emailAddress = document.getElementById('email').value; 
      return (emailAddress=='test'); 
     } 

     function checkname() { 
      return true; 
     } 

     function passwordcheck() { 
      return true; 
     } 

     </script> 
    </head> 
    <body> 
    <form action="#" onsubmit="return checknewaccount();"> 
     <input type="text" id="email" name="email"/> 
     <input type="submit"/> 
    </form> 
    </body> 
</html> 

Các hình thức trong đoạn code trên sẽ chỉ nộp nếu textbox có giá trị kiểm tra

Một thực hiện tốt hơn một chút sẽ là:

<html> 
    <head> 
     <script type="text/javascript"> 
     function checknewaccount() { 
      if(emailvalid() && checkname() && passwordcheck()) { 
       return true; 
      } else { 
       document.getElementById('validation').innerHTML = 'Validation failed!'; 
       return false; 
      } 
     } 

     function emailvalid() { 
      var emailAddress = document.getElementById('email').value; 
      return (emailAddress=='test'); 
     } 

     function checkname() { 
      return true; 
     } 

     function passwordcheck() { 
      return true; 
     } 

     </script> 
    </head> 
    <body> 
    <div id="validation"></div> 
    <form action="#" onsubmit="return checknewaccount();"> 
     <input type="text" id="email" name="email"/> 
     <input type="submit"/> 
    </form> 
    </body> 
</html> 

Vì điều này ít nhất là nói với bạn ser biểu mẫu chưa được gửi. Thậm chí tốt hơn là cung cấp cho người dùng một lý do chi tiết hơn tại sao nhưng vượt quá phạm vi của câu hỏi này ...

+0

Tôi cũng khuyên bạn nên bắt đầu sử dụng lệnh 'alert()' trong JS để tìm ra cái đang chạy (hoặc sử dụng addon firebug trong firefox cho trình gỡ lỗi JS đầy đủ) – Basic

+0

@Basiclife: * "Tôi cũng đề nghị bạn bắt đầu sử dụng lệnh alert() trong JS của bạn ... "* ** Chúa không **, không còn * bất kỳ lý do nào * để gỡ lỗi thông qua cảnh báo. Sử dụng Firebug (như bạn đã đề cập), hoặc Công cụ Dev của Chrome, hoặc Visual Studio, hoặc ... :-) +1 cho điều mẫu, tôi thậm chí không nhìn vào HTML. –

+0

@Basiclife: điều đó sẽ không hoạt động vì hàm kiểm tra chức năng Javascript của tôi() không gọi tệp tin accountcode.php. Tôi muốn có javascript xác nhận tất cả các lĩnh vực là chính xác và sau đó gửi mẫu để accountcode.php. Tôi đã sử dụng return checknewaccount() trên nút gửi để nó sẽ chỉ gửi nếu checknewaccount trả về true. Tôi đã sử dụng điều này trong quá khứ với một cái gì đó như sau .... – Siriss

5

của mỹ Phần này (tôi lấy sự tự do sửa chữa vết lõm):

function checknewaccount(){ 
    if(emailvalid()&& checkname() && passwordcheck()) 
    { 
     return true; 
    } 
    else{ 
     return false; 
    } 
} 

Mặc dù bạn có thể cải thiện nó:

function checknewaccount(){ 
    return emailvalid() && checkname() && passwordcheck(); 
} 

phần Đây là một lỗi cú pháp (để đặt nó nhẹ):

function emailvalid(), checkname(), passwordcheck(){ 
if(condition){ 
    return true;} 
else{return false;} 

Nếu đó không phải là trích dẫn thực sự từ mã của bạn, bạn sẽ phải cập nhật yo câu hỏi ur (mặc dù tôi có thể không có mặt ở đây để cập nhật câu trả lời này). Không có nhiều điểm trong việc hỏi về mã và sau đó trích dẫn mã giả trong câu hỏi. (. Ít nhất, các pseudo-code là mất tích trận chung kết })

được cùng một loại điều này đúng với chức năng của mình theo hình thức:

function emailvalid() 
{ 
     if(email condition) 
     { 
      return true; 
     } 
     else { 
      return false; 
     } 
} 

Đó là tốt (giả định rằng email conditionvẫn psuedocode), nhưng không có nhu cầu sử dụng if:

function emailvalid() 
{ 
    return email condition; 
} 

về "có gì xảy ra", chắc chắn rằng bạn có các công cụ gỡ lỗi bạn có thể chúng tôi e. Chrome có công cụ Dev được tích hợp sẵn, chỉ cần nhấn Ctrl + Shift + I. Đối với Firefox, bạn có thể cài đặt Firebug tuyệt vời. Các phiên bản gần đây của IE có các công cụ dev được tích hợp vào chúng (đối với các phiên bản cũ hơn, bạn có thể tải xuống phiên bản miễn phí của Visual Studio có thể cắm vào trình duyệt). Bất kỳ điều nào trong số này sẽ cho bạn biết về cú pháp và các lỗi khác, cho phép bạn đọc qua tuyên bố mã theo tuyên bố, v.v., điều này rất quan trọng để tìm hiểu điều gì đang xảy ra.

Đây là phiên bản nhanh chóng bị gạch ngang của những gì tôi nghĩ bạn đang cố gắng thực hiện. Tôi sẽ không làm điều đó theo cách này, nhưng tôi đã thực hiện các thay đổi tối thiểu để làm cho nó làm việc:

HTML:

<form action="http://www.google.com/search" 
     method="GET" target="_blank" 
     onsubmit="return checknewaccount()"> 
<input type="text" id="email" name='q' onblur="emailvalid()"> 
<input type="text" id="username" onblur="checkname()" > 
<input type="password" id="password" onkeyup="passwordcheck()"> 
<input type="submit" value="New"> 
</form> 

Ghi chú về rằng:

  • Như Basiclife pointed out, form của bạn mã có vấn đề. Chúng được cố định ở trên.
  • Ở trên, tôi đã sử dụng action="http://www.google.com/search" nhưng tất nhiên đối với bạn, nó sẽ là action="accountcode.php" (hoặc ít nhất, tôi nghĩ là như vậy).
  • Sử dụng onsubmit cho trình xử lý gửi biểu mẫu, chứ không phải onclick trên nút gửi. Bạn không thể hủy bỏ việc gửi biểu mẫu một cách đáng tin cậy qua nút gửi số onclick.
  • Trong onsubmit, chắc chắn rằng bạn sử dụng return   — ví dụ onsubmit="return checknewaccount()", không onsubmit="checknewaccount()"   — bởi vì chúng tôi muốn chắc chắn những thứ sự kiện nhìn thấy giá trị trả về. Chúng tôi không quan tâm nếu nội dung sự kiện không thấy giá trị trả lại của các séc khác của chúng tôi (onblur="emailvalid()"), nhưng nếu chúng tôi đã làm, chúng tôi cũng cần có return s.
  • Chỉ một trong các trường ở trên có thuộc tính name; không ai trong số các bạn làm được. Chỉ các trường có thuộc tính name mới được gửi cùng với biểu mẫu. Tôi chỉ sử dụng một ví dụ name vì tôi chỉ muốn gửi một trường cho Google, nhưng với mục đích của bạn, bạn sẽ muốn thuộc tính name trên tất cả ba trường. This brief article có một cuộc thảo luận của id so với name và những gì họ đang có. Đôi khi bạn muốn cả hai.
  • Tôi đã đặt các thuộc tính trong tất cả các chữ thường, đó là thực hành tốt nhất (và bắt buộc nếu bạn muốn sử dụng XHTML). Tuy nhiên, tôi đã xóa / khỏi các đầu của inputs. Đây là một chút chủ đề, nhưng ở cấp độ rõ ràng bạn đang làm việc, bạn không muốn thử sử dụng XHTML, sử dụng HTML. Sử dụng XHTML một cách chính xác là khó khăn về mặt kỹ thuật, cả về cấu hình authoring và server, và thậm chí sau đó bạn phải phục vụ nó như súp tag cho IE hoặc nó sẽ không xử lý nó đúng cách. XHTML có vị trí của nó, nhưng trong phần lớn các trường hợp, không có lý do gì để sử dụng nó.
  • Với kết hợp bên trên với mã JavaScript bên dưới, không có mục đích nào đối với trình xử lý trên các trường riêng lẻ. Mặc dù vậy, tôi đã bỏ mặc chúng vì tôi cho rằng bạn đang làm nhiều hơn chỉ các kiểm tra bên dưới   — có một ví dụ tiếp tục cho thấy các trình xử lý đó đang làm việc gì đó hữu ích.

JavaScript:

function checknewaccount() { 
    return emailvalid() && checkname() && passwordcheck(); 
} 

function emailvalid() { 
    var element; 

    // Get the email element 
    element = document.getElementById('email'); 

    // Obviously not a real check, just do whatever your condition is 
    return element.value.indexOf('@') > 0; 
} 

function checkname() { 
    var element; 

    // Get the username element 
    element = document.getElementById('username'); 

    // Obviously not a real check, just do whatever your condition is 
    return element.value.length > 0; 
} 

function passwordcheck() { 
    var element; 

    // Get the username element 
    element = document.getElementById('password'); 

    // Obviously not a real check, just do whatever your condition is 
    return element.value.length > 0; 
} 

Live copy

Mọi thứ thay đổi một chút nếu emailvalid, et. Al., Chức năng sẽ làm gì đó để cho người dùng biết các lĩnh vực là không hợp lệ, chẳng hạn như làm nổi bật nhãn:

HTML:

<form action="http://www.google.com/search" 
     method="GET" target="_blank" 
     onsubmit="return checknewaccount()"> 
<label>Email: 
<input type="text" id="email" name='q' onblur="emailvalid()"></label> 
<br><label>Username: 
<input type="text" id="username" onblur="checkname()" ></label> 
<br><label>Password: 
<input type="password" id="password" onkeyup="passwordcheck()"/></label> 
<br><input type="submit" value="New"> 
</form> 

JavaScript:

function checknewaccount() { 
    var result; 
    // Because we're actually doing something in each of the 
    // three functions below, on form validation we want to 
    // call *all* of them, even if the first one fails, so 
    // they each color their field accordingly. So instead 
    // of a one-liner with && as in the previous example, 
    // we ensure we do call each of them: 
    result = emailvalid(); 
    result = checkname() && result; 
    result = passwordcheck() && result; 
    return result; 
} 

function emailvalid() { 
     var element, result; 

    // Get the email element 
    element = document.getElementById('email'); 

    // Obviously not a real check, just do whatever your condition is 
    result = element.value.indexOf('@') > 0; 

    // Update our label and return the result 
    updateLabel(element, result); 
    return result; 
} 

function checkname() { 
    var element, result; 

    // Get the username element 
    element = document.getElementById('username'); 

    // Obviously not a real check, just do whatever your condition is 
    result = element.value.length > 0; 

    // Update our label and return the result 
    updateLabel(element, result); 
    return result; 
} 

function passwordcheck() { 
    var element, result; 

    // Get the username element 
    element = document.getElementById('password'); 

    // Obviously not a real check, just do whatever your condition is 
    result = element.value.length > 0; 

    // Update our label and return the result 
    updateLabel(element, result); 
    return result; 
} 

function updateLabel(node, valid) { 
    while (node && node.tagName !== "LABEL") { 
    node = node.parentNode; 
    } 
    if (node) { 
    node.style.color = valid ? "" : "red"; 
    } 
} 

Live copy

+0

Quên về lỗi cú pháp, điểm có ba hàm là gì nếu chúng giống nhau ? – nico

+0

@nico Tôi đoán là họ không - "điều kiện" sẽ thay đổi trong mỗi điều kiện. – Basic

+0

@Basiclife: Vâng, đó cũng là giả định của tôi, nhưng ... –

Các vấn đề liên quan