使代碼短期和表單驗證

我寫了一個簡單的代碼是使代碼短期和表單驗證

<!DOCTYPE html> 

<html> 
<head> 

    <style type="text/css"> 
    body{ 
     margin-top: 0; 
    } 

    input{ 
     margin-top: 10px; 
    } 
    #nameInput{ 
     width: 250px; 
     margin-left: 60px; 

    } 
    #ageInput{ 
     width: 70px; 
     margin-left: 71px; 
    } 
    #emailInput{ 
     width: 250px; 
     margin-left: 60px; 
    } 
    #dateInput{ 
     margin-left: 9px; 
    } 
    #myButton{ 
     margin-top: 10px; 
     margin-left: 100px; 
    } 
    #yourData{ 
     margin-top: 100px; 
     font-weight: bold; 
    } 

    #dataDetails, td, th{ 
     border: 1px solid black; 
     border-collapse: collapse; 
    } 

    #dataDetails{ 
     width: 50%; 
     text-align: center; 
    } 
    #warning{ 
     font-weight: bold; 
     margin-top: 20px; 
     color: red; 
    } 

    </style> 

</head> 
<body> 

<form> 
Name <input type = "text" id="nameInput" required /><br> 
Age <input type = "number" id="ageInput" required /><br> 
Email <input type = "email" id="emailInput" required /><br> 
Joinging Date <input type = "date" id = "dateInput" required /> 
</form> 
<button id="myButton">Submit</button> 
<p id="yourData"></p> 
<table id="dataDetails"></table> 
<p id="warning"></p> 

<script> 

    var name = document.getElementById("nameInput").value; 
    var age = document.getElementById("ageInput").value; 
    var email = document.getElementById("emailInput").value; 
    var join = document.getElementById("dateInput").value; 
    var tableRow = ""; 

    function myFunction(){ 

     tableRow = tableRow + "<tr>"; 
     tableRow = tableRow + "<th>" + "Your Name" + "</th>"; 
     tableRow = tableRow + "<th>" + "Your Age" + "</th>"; 
     tableRow = tableRow + "<th>" + "Your Email" + "</th>"; 
     tableRow = tableRow + "<th>" + "Your Joining Date" + "</th>"; 
     tableRow = tableRow + "</tr>"; 

     tableRow = tableRow + "<tr>"; 
     tableRow = tableRow + "<td>" + name + "</td>"; 
     tableRow = tableRow + "<td>" + age + "</td>"; 
     tableRow = tableRow + "<td>" + email + "</td>"; 
     tableRow = tableRow + "<td>" + join + "</td>"; 


    tableRow = tableRow + "</tr>"; 
    return tableRow; 
} 

    var click = 0; 


    document.getElementById("myButton").onclick = function(){ 
     click = click + 1; 

     if (click==1) { 
     document.getElementById("yourData").innerHTML = "Here is your filled data"; 
     document.getElementById("dataDetails").innerHTML = myFunction(); 
    } else { 
     document.getElementById("warning").innerHTML = "Details have already been added"; 
    } 
    } 

</script> 

</body> 
</html>

它的工作相當不錯，但HTML5的驗證都不能正常工作。如果我不填寫它們，他們不會給出任何警告&對於輸入錯誤的字段也是如此，除非將其設爲紅色。它將使桌子沒有任何細節。我怎樣才能解決它與HTML5。

此外，我想知道如果我可以做一些簡短的代碼。我的意思是兩行，我必須使用tr標籤兩次。我可以爲它做任何循環&把不同的數據放在它們中。我嘗試過，但問題是它插入兩次相同的數據。請幫忙！

來源

2014-10-27 Brijesh Maurya

我所期望的表每次點擊時都要複製 – mplungjan 2014-10-27 10:27:46

附註：f ORM輸入元素驗證應該**強制性**驗證/過濾/檢查服務器端也（在您的腳本），以防止SQL注入或垃圾郵件！ – bodi0 2014-10-27 10:27:50

感謝大家的建議。那麼mplungjan !,你是對的，所以我已經放了一個if else語句來防止重複表格。 – 2014-10-27 13:57:03

你有這樣的：

<form> 
... 
</form> 
<button id="myButton">Submit</button>

您的提交按鈕的形式之外，

把你的提交按鈕內部形狀

<form> 
Name <input type = "text" id="nameInput" required /><br> 
Age <input type = "number" id="ageInput" required /><br> 
Email <input type = "email" id="emailInput" required /><br> 
Joinging Date <input type = "date" id = "dateInput" required /> 
<button id="myButton">Submit</button> 
</form>

看到jsfiddle

來源

2014-10-27 10:18:17

另外，你應該把JavaScript變量放在'myFunction（）' – 2014-10-27 10:33:51

嗨！如果我把按鈕放在窗體標籤中，那麼創建的表將立即消失。請檢查一次。如何防止呢？ – 2014-10-27 14:04:09

你可以把'return false;'放在onclick裏面以防止表單發佈 – 2014-10-27 14:30:14

使代碼短期和表單驗證

回答

相關問題