问题：想要在客户端先通过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基础知识(22):进程和线程(Ⅰ) 1.多进程 (1)fork Python的os模块封装了常见的系统调用,其中就包括fork,可以在Python程序中轻松创建子进程 fork可以在Mac ...

  2. python全栈开发 * 14 知识点汇总 * 180530

    14 生成器表达式 内置函数# 一.迭代器 (补充)# 1.如何判断迭代对象,迭代器# (1).dir(obj)检测对象有没有iter方法,然后it=obj.__iter__() 获取迭代器 , it ...

  3. CH 2401 - 送礼 - [折半DFS+二分]

    题目链接:传送门 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后,他就不这么认为了.某神牛有N个礼物,且异常沉重,但是GY的力气也异常的大(-_-b) ...

  4. 树莓派3 之 pi3Robot 控制系统配置

    需求 个人正在用Python写一个控制系统,技术选型是python3 + Flask + Mysql + Bootstrap.需要将这套系统直接部署到树莓派中. 代码地址:https://github ...

  5. 图->有向无环图->求关键路径

    文字描述 与AOV-网相对应的是AOE-网(Activity on Edge)即边表示活动的网.AOE-网是一个带权的有向无环图.其中,顶点表示事件Event,弧表示活动,权表示活动持续的时间.通常, ...

  6. 20165317Java实验五 网络编程与安全

    实验五 网络编程与安全 一.中缀转后缀 参考http://www.cnblogs.com/rocedu/p/6766748.html#SECDSA 结对实现中缀表达式转后缀表达式的功能 MyBC.ja ...

  7. SPOJ Distinct Substrings SA

    正解:SA 解题报告: 传送门! 啊先给个翻译趴QwQ大概就是说给个字符串,求互不相等的子串的个数 算是道小水题辣趴,,,并不难想到的呢QAQ只是因为是新知识所以巩固下而已QAQ 然后就显然考虑合法方 ...

  8. stellar.js 视差滚动

    1.引入包 <script src="js/jquery.min.js"></script> <script src="js/jquery. ...

  9. python基础之 异常处理和logging模块

    1.异常处理 l = ['apple','admin','kobe'] for id,item in enumerate(l,1): print(id,item) try: choose_id = i ...

  10. javaScript核心基础

    JavaScript 是属于网络的脚本语言! JavaScript 作用:被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies(js也可创建cookie,在浏览器里面创建),以及更多 ...