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

阅读更多

表单提交前的验证方式——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;
    }
}

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

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

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

    Name: 

    Email: 

    Notice: 

    
    <--一般情况下，这里是使用submit-->

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

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