在web開發中,表單是不可避免的一部分,用戶交互、數據交互都需要表單進行。而javascript正是可以很好地完成表單方面的處理,如表單驗證、表單提交等,接下來本文將介紹javascript如何處理表單。
表單驗證是前端開發中很重要的一部分,在前端進行表單驗證可以及時提醒用戶并減小服務器壓力。下面就是一個示例,演示如何使用javascript處理表單驗證:
<form name="myform" onsubmit="return validateForm()"> <label>姓名:</label> <input type="text" id="name" name="name"><br> <label>郵箱:</label> <input type="email" id="email" name="email"><br> <input type="submit" value="提交"> </form> <script> function validateForm() { var name = document.forms["myform"]["name"].value; var email = document.forms["myform"]["email"].value; if (name == "") { alert("姓名不能為空"); return false; } else if (email == "") { alert("郵箱不能為空"); return false; } else { return true; } } </script>
上面的示例代碼中,當用戶在提交表單之前會調用validateForm()函數,該函數會檢查表單中的姓名和郵箱是否為空,如果為空則會彈出相應的提示框。如果表單中姓名和郵箱都不為空,則會返回true,繼續提交表單。
除了前端表單驗證,javascript還可以用來實現表單的動態填充。比如,在用戶填寫完一個表單之后,又需要讓用戶填寫一個相關的表單項,我們就可以使用javascript來實現動態生成表單項,如下所示:
<form id="myform"> <label>姓名:</label> <input type="text" id="name" name="name"><br> <div id="food-div"></div> <input type="button" value="添加你喜歡的食物" onclick="addFood()"> <br> <input type="submit" value="提交"> </form> <script> function addFood() { var foodCount = document.querySelectorAll('input[name="food"]').length; var foodDiv = document.getElementById('food-div'); var input = document.createElement('input'); input.type = "text"; input.name = "food"; input.id = "food" + foodCount; foodDiv.appendChild(input); foodDiv.appendChild(document.createElement('br')); } </script>
上面的示例代碼中,我們在表單中添加了一個按鈕,在點擊該按鈕之后會調用addFood()函數,在該函數中我們向表單中添加一個文本框來讓用戶添加自己喜歡的食物,一旦用戶添加了一個食物,我們就動態地向表單中添加一個表單項。用戶可以一次性添加多個食物,而且我們還給每個食物添加了一個id,以方便的在提交的時候進行處理。
javascript還可以用來為表單添加事件處理程序。下面是一個示例,演示如何使用javascript為表單添加事件處理程序:
<form name="myform"> <label>姓名:</label> <input type="text" id="name" name="name"><br> <label>郵箱:</label> <input type="email" id="email" name="email"><br> </form> <script> var nameInput = document.getElementById('name'); nameInput.onblur = function() { var name = nameInput.value; alert("您的姓名是:" + name); } var emailInput = document.getElementById('email'); emailInput.onblur = function() { var email = emailInput.value; alert("您的郵箱是:" + email); } </script>
上面的示例代碼中,我們給表單中的姓名和郵箱兩個文本框分別添加了一個onblur事件處理程序,在失去焦點的時候會彈出一個提示框,告訴用戶其姓名和郵箱。
除此之外,javascript還可以用來處理表單提交及數據處理等問題,使表單在web開發中達到最優的狀態。