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，否則阻止表單的提交並給出相應的錯誤提示。