表单提交前的验证方式——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表单。
分享到:
相关推荐
submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求
在form表单上添加一个提交事件调用验证数据方法 <form name="listform" action="resume-doAdd" method="post" onsubmit="return Validator.Validate(this,3);"> 请输入正确的手机号!" requiremsg="移动电话不能为...
1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action=...
在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑;注意点: 1、只有通过form里面的 <button type="submit" >提交</button>进行表单的...
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。1、表单元素中出现了name=”submit”的元素这种情况下elemForm.submit();将不会触发表单提交...
本文实例讲述了Yii框架表单提交验证功能。分享给大家供大家参考,具体如下: 一、前端提交的三种方式 前面已经提出,表单提交一共只有三种方式。 1. 前端原生html (1)原生html标签 首先,直接使用html标签的input,...
5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个 提交" validatorType="disable"> 6、不验证表单 当validator域值为0时不对表单进行...
return false会阻止表单提交,基本上关于onsubmit=return false有以下几点要注意的地方,学习后台编程的朋友一定要知道。
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $(“#form1”).form(‘validate’)方法即可,EasyUi中form模块中的from(‘validate’)方法会自行对我们指定的表单中...
本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。...form id=register onSubmit=return saveInfo()> <label for=name>Name: <input type=text name=name id=name> <input
先贴代码 [removed] function appendText(){ ... 然后再在 form 表单进行提交时候 <form onsubmit="appendText();" > 然后在后台查看数据美容,就会对应的加上相应的字符 以上所述就是本文的全部内容了,
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 [removed] function validate(obj) { if (confirm("提交表单?")) { alert(obj.value); return true; } else { ...
js表单验证控制代码大全 /* 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能...
* 表单事件:onsubmit、onfocus、onblur、onchange * 页面事件:onload、onunload 在实际应用中,Event 对象通常与函数结合使用,以便处理用户的交互行为。例如,在点击某个按钮时,执行一个函数,以便实现某个功能...
简便的XML配置,易于扩充的验证方式(目前支持13种验证,囊括了大部分常用表单验证),使得JSValidation成为验证框架的首选。 1. JSValidation是什么? 如首页所说,JSValidation是客户端表单验证框架,用在...
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $(“#form1”).form(‘validate’)方法即可,EasyUi中form模块中的from(‘validate’)方法会自行对我们指定的表单中...
js验证表单大全js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i;i++) if(obj.oo[i].checked==true) return true; alert("请选择")return false; }</script><form id="form1...
之前项目中使用的表单提交方式 使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中 代码如下: function addSubmit(){ $(‘#addForm’).form(‘submit’, { url : _basePath + ‘/@Controller/@...
React<AutoForm> <AutoForm> 组件,它简化了通过其onChange事件和表单的onSubmit事件从其包含的表单输入中获取数据的操作,可以选择修剪文本输入。安装npm install react-auto-formimport AutoForm from 'react-auto...