问题：想要在客户端先通过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. Python学习之旅（三十三）

    Python基础知识(32):网络编程(Ⅰ) 网络通信是两台计算机上的两个进程之间的通信,而网络编程就是如何在程序中实现两台计算机的通信 P协议负责把数据从一台计算机通过网络发送到另一台计算机 TCP ...

  2. Oracle的基本查询知识

    基本语法 SELECT [DISTINCT] {*, column [alias],...} FROM table;参数说明SELECT 标识出所需的数据列.函数.常量和表达式.Distinct 删除 ...

  3. 编写函数求整形数组a中存储的m个不重复的整数的第k大的整数(其中m>=1,1<=k<=m)很简单的一个思路是酱紫的：管他辣么多干啥，上来一把排序然后直接得答案

    /** * @author:(LiberHome) * @date:Created in 2019/2/28 20:38 * @description: * @version:$ *//*编写函数求整 ...

  4. 清除 System.Web.Caching.Cache 以"xxx"开头的缓存

    public static void ClearStartCache(string keyStart) { List<string> cacheKeys = new List<str ...

  5. POJ 2187 - Beauty Contest - [凸包+旋转卡壳法][凸包的直径]

    题目链接:http://poj.org/problem?id=2187 Time Limit: 3000MS Memory Limit: 65536K Description Bessie, Farm ...

  6. webpack的externals的使用

    externals 官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD.AMD或者window/global全局的方式访问. ...

  7. 《Java程序设计》 第四周学习总结

    学号 20175313 <Java程序设计>第四周学习总结 教材学习内容总结 第五章主要内容 了解子类的继承性 子类和父类在同一包中的继承性(除private外其余都继承) 子类和父类不在 ...

  8. gzframework demo搭建

    感谢框架作者,这里给出他的博客 http://www.cnblogs.com/GarsonZhang/ 背景:由于作者对代码的持续开发,导致了以前博客中的下载地址和构建方法和目前的项目不对应,这里给出 ...

  9. CentOS6.5安装pip

    首先重要的事情说三遍,因为可能有程序依赖目前的python2环境,比如yum: 不要动现有的python2环境! 不要动现有的python2环境! 不要动现有的python2环境! 如果你动了,yum ...

  10. idea快捷键使用

    idea                                 eclipse project                           workspace module     ...