问题：想要在客户端先通过JS验证后再将表单提交到服务器

参考资料：

jQuery 事件 - submit() 方法

试验过程：

服务器端使用PHP

 <html>

 <head>

     <script type="text/javascript" src="plugins/jquery-3.2.1.min.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             $("form").submit(function () {

                 var FirstName=$("input[name=FirstName]").val();

                 var LastName=$("input[name=LastName]").val();

                 if((FirstName==="") || (LastName==="")){

                     alert("请输入全部信息");

                     return false;

                 }else{

                     return true;

                 }

             });

             $("button").click(function () {

                 $("form").submit();

             })

         });

     </script>

 </head>

 <body>

 <form name="input" action="" method="get">

     First name:

     <input type="text" name="FirstName"  size="20">

     <br />Last name:

     <input type="text" name="LastName"  size="20">

     <br />

     <input type="submit" value='使用input提交,type="submit"'><br/>

     <input type="submit" value='使用input提交,type="submit" name="submit"' name="submit"><span>有name属性，会导致点击&lt;button type="button"&gt;标签的按扭无法提交到服务器</span><br/>

     <button type="button">使用button提交type="button"</button>

     <span>无法提交&lt;input type="submit" name="submit"&gt;的信息，因此不能将表单提交到服务器</span><br/>

     <button>使用button提交,无type</button><span>默认type="submit",JS会验证两次</span><br/>

     <button type="submit">使用button提交type="submit"</button><span>JS会验证两次，同上</span><br/>

 </form>

 <hr/>

 表单外：<br/>

 <button>触发表单域的 submit 事件</button>

 </body>

 </html>

 <?php

 if(!empty($_GET['FirstName']) && !empty($_GET['LastName'])){

     echo '<p>Fisrt Name:'.$_GET['FirstName'].'</p>';

     echo '<p>Last Name:'.$_GET['LastName'].'</p>';

 }

 ?>

html的两种提交按钮submit和button

注意1：

在有<input type="submit"  name="submit" value="提交"/>的情况下使用<button type="button">提交</button>会导致通过JS验证后表单不提交到服务器。

原因不详

注意2：

试验中<button type="submit">提交</button>，会走两次JS验证，

原因应该是button自身的type="submit"执行了一次，click事件中的$("from").submit();执行了一次。

最终结论：

建议使用<button type="submit">Submit</button>来提交表单

在客户端先通过JS验证后再将表单提交到服务器的更多相关文章

  1. form表单验证失败，阻止表单提交

    form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...

  2. koa 基础（十）原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  3. js控制页面显示和表单提交

    早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...

  4. JS　无限长form表单提交

    1 简介 开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件．再 ...

  5. 按钮js跳转到非表单提交页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  7. springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

  8. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  9. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

随机推荐

  1. tuple的基本使用

    常用如下所示: # 元祖,tuple-->不可变,但元祖里面的数据可以变化 # 当元祖只有一个元素时,需加’,‘,否则类型是<class 'int'> # tuple1 = (1) ...

  2. python全栈开发 * 进程理论 进程创建 * 180724

    一.进程理论 1.进程是资源分配的最小单位. 2.进程调度就是多个进程在操作系统的控制下被CPU执行,去享用计算机的资源. 先来先服务 短作业优先 时间片轮转 多级反馈队列 3.进程调度的过程是不能够 ...

  3. C#Web从0到1—创建一个web并从VS集成的SQLlocalDB数据库中查询数据

    软件说明: VS2017,腾讯云服务器10元1个月,系统Win2012 R2标准版 第一步:建立第一个网页 建立工程 建好后,可以打开View选项打开项目资源浏览器和工具箱,后文会多次用到这两个版面 ...

  4. winform中按钮透明的方法

    把Button设为透明的方法:1.修改 FlatAppearance属性下的BorderSize 为0  修改 FlatStyle 的属性为 Flat 2. /// <summary>// ...

  5. ES6 数组方法拓展

    ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...

  6. spring 总结

    控制反转(Inversion of Control) 依赖注入(Dependency Injection) 一.控制反转 1.控制:传统的方式是由程序创建的,写死的, spring 是由spring管 ...

  7. mysql 时间戳的使用!

    时间转时间戳方法: unix_timestamp() 记录时间戳的类型: bigint 时间戳转时间的方法:from_timestamp() 感谢水哥给的截图!

  8. dbgrid 无法显示表中所有字段

    有时表中字段有更新,dbgrid无法显示表中字段. 解决办法: 1.adoquery断开 2. dbgrid字段全部删除 3.adoquery打开 4.dbgrid选择全部字段

  9. Linux-003-Resource temporarily unavailable

    Jenkins构建任务向服务器发送war包时提示信息如下所示: 由上述信息可知通过SSH命令连接失败.通过Client连接服务器,提示信息如下: 提示信息说明资源暂时不可用. 原因一般是因为用户或应用 ...

  10. 16.0-uC/OS-III同步

    同步 uC/OS-III中用于同步的两种机制:信号量和事件标志组 . 1.信号量 信号量最初用于控制共享资源的访问.信号量可用于ISR与任务间.任务与任务间的同步. “ N”表示信号量可以被累计.初始 ...