利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<script type= "text/javascript" > function validate(obj) { if (confirm( "提交表单?" )) { alert(obj.value); return true ; } else { alert(obj.value); return false ; } } </script> <body> <form action= "http://www.jb51.net" onsubmit= "return validate(document.getElementByIdx_x('myText'));" > <!—参数的这种写法注意下--> <input type= "text" id= "myText" /> <input type= "submit" value= "submit" /> </form> </body> |
第二种方式:通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script type= "text/javascript" > function validate() { if (confirm( "提交表单?" )) { return true ; } else { return false ; } } function submitForm() { if (validate()) { document.getElementByIdx_x( "myForm" ).submit(); } } </script> <body> <input type= "text" /> <input type= "button" value= "submitBtn" onclick= "submitForm();" /> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件--> </form> </body> |
第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script type= "text/javascript" > function validate() { if (confirm( "提交表单?" )) { return true ; } else { return false ; } } </script> <body> <input type= "text" /> <input type= "submit" value= "submit" onsubmit= "return validate()" /> </form> </body> |
第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script type= "text/javascript" > function validate() { if (confirm( "提交表单?" )) { return true ; } else { return false ; } } </script> <body> <input type= "text" /> <input type= "submit" value= "submit" onclick= "return validate()" /> </form> </body> |
第五种方式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<body> <input type= "text" /> <input type= "button" value= "submitBtn" id= "myBtn" /> </form> </body> <script type= "text/javascript" > function validate() { if (confirm( "提交表单?" )) { return true ; } else { return false ; } } |
通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证
1
2
3
4
5
6
7
8
|
function submitForm() { if (validate()) { document.getElementByIdx_x( "myForm" ).submit(); } } document.getElementByIdx_x( "myBtn" ).onclick = submitForm; </script> |
以上这篇利用JS提交表单的几种方法和验证(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考
利用JS提交表单的几种方法和验证(必看篇)的更多相关文章
- 利用JS提交表单的几种方法和验证
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...
- 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结
1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...
- Mvc 提交表单的4种方法全程详解
一,MVC HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...
- Mvc 提交表单的4种方法
一,MVC HtmlHelper方法 1. Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 2. ...
- JSP提交表单的几种方法
1.通过<form action="url"><input type="submit"></form>按钮方式提交 这种方式 ...
- spring mvc 防止重复提交表单的两种方法,推荐第二种
第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...
- js校验表单后提交表单的三种方法总结
第一种: 复制代码 代码如下: <script type="text/javascript"> function check(form) { if(fo ...
- js校验表单后提交表单的三种方法总结(转)
第一种: 代码如下: <script type="text/javascript"> function check(form) { if(form.userId.val ...
- JS-校验表单后提交表单的三种方法总结
第一种: <script type="text/javascript"> function check(form) { if(form.userId.value=='' ...
随机推荐
- c++11时间相关库(chrono)
以下整理自:https://www.2cto.com/kf/201404/290706.html chrono 库主要包含了三种类型:时间间隔 Duration.时钟 Clocks 和时间点 Time ...
- Docker Community Edition 镜像使用帮助
1.什么是Docker 容器技术 在计算机的世界中,容器拥有一段漫长且传奇的历史.容器与管理程序虚拟化 (hypervisor virtualization,HV)有所不同,管理程序虚拟化通过中间层将 ...
- 【guava】字符串操作
一,Strings类 public void testStrings(){ Strings.isNullOrEmpty("");//返回true Strings.nullToEmp ...
- python3入门之列表和元组
获得更多资料欢迎进入我的网站或者 csdn或者博客园 前面一张主要学习了Python的安装,以及第一个程序helloword的编写,以及简单的输入和输出函数,这章主要介绍序列,列表,元组 序列 这章 ...
- Vue-think脚手架
准备重构的项目,原来的后台是thinkPHP写的,刚刚摸VUE,不知道里面数据调用原理,想先安装vuethink学习一下. 结果安装半天,npm run dev的时候报错,尝试了很多方法,各种重装,看 ...
- .net mvc 框架实现后台管理系统4-layedit使用
做个简单的文章发布,使用了layui的layedit 效果: 在html页面添加: <textarea id="MyArticleContent" style="d ...
- AndroidManifest.xml警告
新建一个android项目后,AndroidManifest.xml有一个黄色警告 作为一个新手,不知道这个警告来自哪里,点击界面下方的不同标签,才知道来自图中的位置 第8行中,application ...
- Android 给app加入百度地图
1.获取sha1值 (1)win+R进入cmd窗口 (2)输入以下代码 C:\SoftApplication\javajdk\jdk1.8.0_151\bin>keytool -list -v ...
- Django-admin 的使用
admin 组件的使用 Django 提供功能十分强大的后台管理组件 admin 来实现自动管理. admin 是一个组件,与 APP 一样,项目启动一开始就加载了.在 setting.py 中的 I ...
- POJ 2983 M × N Puzzle
M × N Puzzle Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 4860 Accepted: 1321 Des ...