表单提交前的验证方式——form的onsubmit事件

1.1概述
        onsubmit事件只在form元素中使用。onsubmit事件会在表单中的提交按钮被点击才会触发，所以常用于在表单提交前进行统一验证。
1.2语法
        onsubmit = "return false"，不执行提交。
        onsubmit = "return true" 或 onsubmit = "return"，执行提交。
1.3实例
        实例——提交验证：

function submitFun(obj){
    if(obj.category.value == '' "){
        alert("请输入");
        return false;
    }
}

<form onsubmit="submitFun();">
    <input type="text" name="category" >
    <input type="submit" name="submit" value="提交">
</form>

        上述实例中，当"提交"按钮被点击时，会触发表单的onsubmit事件，此时函数submitFun()被执行。如果提交为空，则提示输入并返回false，即表单不会被提交。
1.4拓展——onsubmit()与submit()的区别
1、区别
        1》onsubmit()是一个js事件，该事件会在表单提交时触发；而submit是一个方法，该方法用于提交form表单。
        2》二者操作的前后顺序：onsubmit()在前，submit在后。
2、实例
Js代码：

function fun(){
    alert("form submit !");
}

<form onsubmit="fun()">
    <input type="submit" id="aaa" value="submit">
    <input type="button" id="bbb" value="onclick_submit" onclick="document.forms[0].submit();">
</form>

注意：点击input[type="button"]按钮，表单会提交，但不会运行函数fun()，原因是onsubmit事件不能通过此方式触发。点击input[type="submit"]按钮，表单会提交，onsubmit事件也会被触发。
1.5拓展——input[type="submit"]提交与js提交的区别
提交form表单可以使用input[type="submit"]按钮提交，也可以使用javascript来提交表单。
实例：

<form action="" method="post" id="form">
    Name: <input type="text" name="username" size="30"><br>
    Email: <input type="text" name="useraddr" size="30"><br>
    Notice: <textarea name="comments" cols="30" rows="5"></textarea><br>
    <input type="button" value="Send Form" onclick=" formSubmit ();">
    <--一般情况下，这里是使用submit-->
</form>

function formSubmit(){
    document.getElementById("form").submit();
}

上述使用js来提交表单，首先需要获取form表单，然后使用js的submit()方法来提交表单到服务器。而使用input[type="submit"]按钮来提交则不需要获取form表单。

表单提交前的验证方式——form的onsubmit事件

猜你喜欢