onsubmit用法详解

一、onsubmit事件

onsubmit是HTML中常用的一个事件，主要用于在提交表单时执行JavaScript代码。

该事件的使用方式为：在form标签中添加onsubmit属性，赋值为对应的JavaScript函数或代码，当用户提交表单时该事件便会被触发执行。

二、js onsubmit事件

在JavaScript中，也可以通过addEventListener()或attachEvent()等方法动态添加onsubmit事件，具体用法如下：

    
        var form = document.getElementById("myForm");
        if(form.addEventListener){
            form.addEventListener("submit", function(){
                //执行代码
            }, false);
        }else{
            form.attachEvent("onsubmit", function(){
                //执行代码
            });
        }
    

上述代码中，先通过getElementById()方法获取表单元素，然后通过addEventListener()或attachEvent()方法添加onsubmit事件。其中，addEventListener()方法的第三个参数是用来指定事件是在冒泡阶段执行还是在捕获阶段执行。

三、onsale的用法

onsale是一种常用的事件，但并不是HTML中内置的事件。它一般是JavaScript代码中自定义的事件，用来在表单提交之前进行一些必要的校验或操作，例如校验用户输入信息的合法性、计算表单数据、向服务器发送请求等。

onsale事件的使用方式与onsubmit类似，需要在表单中添加onsubmit属性，并将其赋值为onsale事件的触发函数或代码。示例如下：

    
        function check(){
            //执行校验操作
            return true; //校验通过返回true，否则返回false
        }
    

在上述代码中，check函数就是onsale事件的触发函数，可以在其中执行表单的校验操作，并根据校验结果返回true或false，从而控制表单的提交是否成功。

四、js onsubmit事件

除了在表单中添加onsubmit属性，JavaScript中还可以通过onsubmit事件自动触发表单提交操作。示例如下：

    
        var form = document.getElementById("myForm");
        if(form){
            form.onsubmit = function(){
                //执行代码
                return true; //校验通过返回true，否则返回false
            };
        }
    

在上述代码中，通过getElementById()方法获取表单元素，然后将其onsubmit事件的触发函数赋值为对应的JavaScript代码，并在其中执行校验操作，从而控制表单的提交是否成功。

五、onsubmit事件怎么使用

下面通过一个简单的例子来探讨onsubmit事件的使用：

    
        
            姓名：
            
            年龄：
            
            提交
        
        
            function check(){
                var name = document.getElementById("name").value;
                var age = document.getElementById("age").value;
                if(name.trim().length === 0 || age === ''){
                    alert("姓名和年龄不能为空！");
                    return false;
                }else if(isNaN(age)){
                    alert("年龄必须为数字！");
                    return false;
                }else{
                    //执行提交逻辑
                    return true;
                }
            }
        
    

在上述代码中，当用户点击提交按钮时，就会触发表单的onsubmit事件，即调用check()函数。在check()函数中，首先获取表单中输入的姓名和年龄，然后对其进行必要的校验（为空或不是数字），最后返回校验结果（true或false）。如果校验通过，则执行表单的提交操作，否则阻止表单的提交，并给出相应的错误提示。

六、onsubmit事件的作用是

onsubmit事件的主要作用是在表单提交之前进行一些必要的校验或操作，以确保表单数据的正确性和完整性，同时避免由于非法数据引起的服务器端错误。通过onsubmit事件，我们可以方便地完成表单的校验、数据转换、数据计算等操作，从而提高表单的可用性和用户体验。

七、onsubmit=”return check()”

在onsubmit事件中，可以通过return关键字来控制表单的提交。如果返回false，即表示阻止表单的提交，否则表单提交成功。在实践中，我们通常将onsubmit属性的赋值设置为return check()或类似的形式，即在表单提交之前先执行一个校验函数，再根据校验结果控制表单的提交。例如：

    
        
            姓名：
            
            年龄：
            
            提交
        
        
            function check(form){
                var name = form.name.value;
                var age = form.age.value;
                if(name.trim().length === 0 || age === ''){
                    alert("姓名和年龄不能为空！");
                    return false;
                }else if(isNaN(age)){
                    alert("年龄必须为数字！");
                    return false;
                }else{
                    //执行提交逻辑
                    return true;
                }
            }
        
    

在上述代码中，将onsubmit属性的赋值设置为return check(this)的形式，即表示在表单提交之前先执行check()函数，并将form对象作为参数传递给该函数。在check()函数中，根据传入的form对象获取输入框中的姓名和年龄，并对其进行校验。如果校验通过，则返回true，否则阻止表单的提交并给出相应的错误提示。