在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开发中达到最优的状态。