jQuery submit() 方法

jQuery 事件submit()方法用於將事件處理程式（函式）繫結到提交事件，或在選定元素上觸發該事件。當提交事件發生時，附加的函式將執行。

以下是關於提交事件的一些重要點：

當HTML表單提交時，將發生提交事件。
提交事件只能與HTML表單元素一起使用。

語法

以下是jQuery事件submit()方法的語法：

$(selector).submit(function);

引數

此方法接受一個可選的引數作為函式，如下所述：

function (可選) − 當提交事件發生時執行的可選函式。

返回值

此方法不返回值，但會附加一個函式，在提交事件發生時執行。

示例 1

以下程式演示了jQuery事件submit()方法的使用：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <form>
        Username: <input type="text"><br><br>
        Password: <input type="password"><br><br>
        <button>Submit</button>
    </form>
    <script>
        $('form').submit(function(){
            alert("Form submitted...");
        });
    </script>
</body>
</html>

輸出

上述程式顯示一個帶有兩個輸入欄位和一個按鈕的表單。當用戶提交表單時，瀏覽器螢幕上將出現一個彈出警報：

示例 2

使用'submit'事件進行表單驗證

以下是jQuery事件submit()方法的另一個示例。我們使用此方法來阻止表單提交，直到表單透過驗證：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <form>
        Username: <input type="text"><br><br>
        Password: <input type="password"><br><br>
        <button>Submit</button>
        <span></span>
    </form>
<script>
        $('form').submit(function(event){
            if(!isValidForm()){
                event.preventDefault();
            }
        });
        function isValidForm(){
            var $uname = $('input[type="text"]').val();
            var $psw = $('input[type="password"]').val();
            if($uname.trim().length == 0){
                $('span').text("Username is required...!");
                $('span').css("color", "red");
                return false;
            }
            else if($psw.trim().length == 0){
                $('span').text("Password is required...!");
                $('span').css("color", "red");
                return false;
            }
            else{
                $('span').text("Form submitted...!");
                $('span').css("color", "green")
                return true;
            }
        }
</script>
</body>
</html>

輸出

執行上述程式後，它將顯示一個帶有兩個輸入欄位和一個按鈕的表單。如果輸入欄位為空，則無法提交表單，並且將在“紅色”中顯示錯誤訊息：

jquery_ref_events.htm

列印頁面