📅 最后修改于: 2023-12-03 15:40:56.109000 🧑 作者: Mango
JavaScript表单事件处理函数是一类特殊的函数，它们通过将函数与特定的表单元素事件关联，可以在用户与表单元素交互时执行特定的动作。
element.eventname = function(){
// event handler code
}
这里的element可以是任意的表单元素，如input、textarea、select等等。eventname则是表单元素可以触发的事件，例如blur、change、click、focus等等，具体事件取决于不同的表单元素。
在表单提交之前，我们通常需要验证提交的数据是否合法。下面是一个基本的表单验证实现。
<!DOCTYPE html>
<html>
<head>
<title>表单验证示例</title>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" required>
<br>
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('form');
const username = document.getElementById('username');
const password = document.getElementById('password');
form.onsubmit = function(event){
event.preventDefault();
if(username.value.trim() === ''){
alert('请输入用户名');
return;
}
if(password.value.trim() === ''){
alert('请输入密码');
return;
}
// 验证通过，可以提交表单
form.submit();
}
</script>
</body>
</html>
在这个例子中，我们通过使用form元素的onsubmit事件来验证表单数据。如果表单中存在未填写的必填项，我们将通过alert弹出对应的提示信息，阻止表单提交。
我们可以通过JavaScript在表单中动态添加、删除元素。
<!DOCTYPE html>
<html>
<head>
<title>动态更新表单示例</title>
</head>
<body>
<form>
<div id="inputs">
<label for="input-1">输入1:</label>
<input type="text" id="input-1">
<br>
<label for="input-2">输入2:</label>
<input type="text" id="input-2">
</div>
<br>
<button type="button" id="add-input">添加输入框</button>
<button type="button" id="remove-input">删除输入框</button>
</form>
<script>
const addInput = document.getElementById('add-input');
const removeInput = document.getElementById('remove-input');
const inputsDiv = document.getElementById('inputs');
addInput.onclick = function(){
const label = document.createElement('label');
label.textContent = '输入:';
const input = document.createElement('input');
input.type = 'text';
inputsDiv.appendChild(label);
inputsDiv.appendChild(input);
}
removeInput.onclick = function(){
const lastChild = inputsDiv.lastElementChild;
if(lastChild.tagName.toLowerCase() === 'input'){
inputsDiv.removeChild(lastChild.previousElementSibling);
inputsDiv.removeChild(lastChild);
}
}
</script>
</body>
</html>
在这个例子中，我们通过使用document.createElement方法动态创建并添加label和input元素；通过parentElement.removeChild方法删除表单中最后一组label和input元素。这里我们使用了addInput和removeInput两个按钮的onclick事件处理函数实现动态更新表单。
总结：在这个简短的介绍中，我们学习了如何使用表单反应函数来实现表单验证、动态更新表单等功能。希望这些实例能够帮助你更好地理解表单反应函数，并在实际项目中运用到你的工作中。