当前位置:首页 > 教程 > 正文内容

form事件(表单事件)- JavaScript事件处理

唐朝2年前 (2024-04-15)教程886

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> <!--当用户离开输入字段时更改为大写-->
        说 &nbsp; 明: <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 事件

    文档如有描述不清楚、错误或者过时的地方,欢迎留言指出。

    文档、教程内容会不定时更新,转载请标明原帖链接,以免让过时的教程流入网络。

    分享给朋友:

    “form事件(表单事件)- JavaScript事件处理” 的相关文章

    事件捕捉与事件冒泡 - JavaScript事件处理

    事件冒泡的执行顺序冒泡原理:当一个事件发生在一个元素上,它会首先运行在该元素上的处理程序,然后运行其父元素上的处理程序,然后一直向上到其他祖先上的处理程序。<div onclick="alert('执行')">   &l...