MyException - 我的异常网
当前位置:我的异常网» Web前端 » 表单提交前的验证形式——form的onsubmit事件

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

www.MyException.Cn  网友分享于:2013-11-16  浏览:0次
表单提交前的验证方式——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;
    }
}

<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表单。

文章评论

科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员必看的十大电影
程序员必看的十大电影
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员和编码员之间的区别
程序员和编码员之间的区别
我是如何打败拖延症的
我是如何打败拖延症的
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
漫画:程序员的工作
漫画:程序员的工作
代码女神横空出世
代码女神横空出世
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Java程序员必看电影
Java程序员必看电影
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
一个程序员的时间管理
一个程序员的时间管理
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我的丈夫是个程序员
我的丈夫是个程序员
中美印日四国程序员比较
中美印日四国程序员比较
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员都该阅读的书
程序员都该阅读的书
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
老程序员的下场
老程序员的下场
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
总结2014中国互联网十大段子
总结2014中国互联网十大段子
 程序员的样子
程序员的样子
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的鄙视链
程序员的鄙视链
旅行,写作,编程
旅行,写作,编程
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
鲜为人知的编程真相
鲜为人知的编程真相
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有