form事件(表单事件)- JavaScript事件处理
form事件是由HTML表单内的动作触发的事件,它提供一个让客户端输入文字或选择的功能,例如:单选按钮、复选框、选择列表等,由﹤form﹥标记组构成,JavaScript自动为每一个表单建立一个表单对象,并可以将用户提供的信息送至服务器进行处理。
如何提交一个表单
提交表单时,会触发 submit 事件,它通常用于在将表单发送到服务器之前对表单进行校验,或者中止提交,并使用 JavaScript 来处理表单。
form.submit() 方法允许从 JavaScript 启动表单发送。我们可以使用此方法动态地创建表单,并将其发送到服务器。
提交表单主要有两种方式:
第一种 —— 点击 <input type="submit">。
第二种 —— 在 input 字段中按下 Enter 键。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form事件属性</title>
<script type="text/javascript">
function submitForm() {
let name = document.getElementById("uname").value;
let regex = /^[a-zA-Z\s]+$/;
if (regex.test(name) === false) {
alert("名称有问题");
}else{
alert("表单已提交!");
}
}
function resetForm() {
alert("表单已重置!"); //显示一个消息框
}
function upperCase() {
var x = document.getElementById("uname").value;
document.getElementById("uname").value = x.toUpperCase(); //更改为大写字母
}
function showMsg() {
alert("您选中了一些文本!"); //显示一个消息框
}
</script>
</head>
<body>
<form action="" onsubmit="submitForm()" onreset=resetForm() method="post">
用户名: <input type="text" name="uname" id="uname" onblur="upperCase()"> 请输入英文名字<br><br> <!--当用户离开输入字段时更改为大写-->
说 明: <textarea rows="5" cols="22" onselect="showMsg()">请选中我!</textarea><br><br>
<!--当用户在文本框中选中一些文本时时触发事件-->
<input type="submit" value="提交"> <!--当提交表单时触发事件-->
<input type="reset" value="重置"> <!--当重置表单时触发事件-->
</form>
</body>
</html>扩展阅读
表单事件的种类input 事件
select 事件
change 事件
invalid 事件
reset 事件,submit 事件
文档如有描述不清楚、错误或者过时的地方,欢迎留言指出。
文档、教程内容会不定时更新,转载请标明原帖链接,以免让过时的教程流入网络。
