问题：想要在客户端先通过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. [Day13]static、final、匿名对象、内部类、包、修饰符、代码块

    1.final-最终 (1)final的特点 final修饰类不可以被继承,但是可以继承其他类 final修饰的方法不可以被覆盖,但父类中没有final修饰方法,子类覆盖后可以加final final ...

  2. 图->最短路径->多源最短路径(弗洛伊德算法Floyd)

    文字描述 求每一对顶点间的最短路径,可以每次以一个顶点为源点,重复执行迪杰斯特拉算法n次.这样,便可求得每一对顶点之间的最短路径.总的执行时间为n^3.但是还有另外一种求每一对顶点间最短路径的方法,就 ...

  3. JDK 1.8 JVM的变化

    前言: 1.什么是JVM JVM的全称是 Java Virtual Machine(Java虚拟机),它通过模拟一个计算机来达到一个计算机所具有的功能. Java和实体计算机一样也必须有一套合适的指令 ...

  4. 深入浅出--UNIX多进程编程之fork()函数

    0前言 上周都在看都在学习unix环境高级编程的第八章--进程控制.也就是这一章中.让我理解了unix中一些进程的原理.以下我就主要依照进程中最重要的三个函数来进行解说.让大家通过阅读这一篇文章彻底明 ...

  5. JAVA：IDEA使用Junit（3）

    1.配置 File ——> Project Structure ——> Libraries ——> + ——>搜索Junit类库 确认ok即可 2.编辑项目 选择创建 配置生成 ...

  6. mongoose findByIdAndUpdate不执行的解决方法

    请参考Mongoose的文档 1.findOneAndUpdate([query], [doc], [options], [callback]) 有callback传递才执行. 2.exec是prom ...

  7. 栈ADT

    栈 栈是限制插入和删除只能在同一位置的表,这一位置称为栈顶(top),也可能称为LIFO表 对于空栈的pop(弹栈)操作是一个ADT错误,但是若是push(压栈)时空间超限并不是ADT错误 实现:基于 ...

  8. fiddler学习总结--利用fiddler快速模拟mock

    Mock的应用就是在测试接口的时候,去模拟我们想要的接口 1.创建一个txt文件,里面随意写一个json字符串,如图所示: 2.选择目标消息,并且点击“autoresponde”-->“add ...

  9. SV class

    SV中的class通过new来创建实例,new函数可以传递多个参数: packet P1:  P1 = new:创建一个P1的对象: P2 = P1:P2也指向同一个对象: P2 = new P1:P ...

  10. linux C access

    [1]作用 确定文件的访问权限 [2]头文件 #include <unistd.h> [3]函数定义 int access(const char * pathname,  int mode ...