问题：想要在客户端先通过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语法_变量及命名规则

    变量:存储信息的,日后被调用,修改操作 常量:固定不变的量,字母大写 变量命名规则: 1 有字母,数字以及下划线等符号组成 2 区分大小写 3 不能使用数字开头,不能含有特殊字符和空格 4 不能使用 ...

  2. Ubuntu 14.04循环登录问题(密码正确，无法登录)

    今天遇到了ubuntu 的循环登录问题,即使输入的密码是正确的,也无法成功登录.查询资料,发现有各种问题引起的循环登录问题,比如安装了jdk,或者安装了驱动. 最后找到了问题的原由:我的电脑是双显卡, ...

  3. 嵌入式常用技术概览之IIC(I2C)

    一.先决知识             (1)模电基础知识(用以理解IIC如何通信) 二.IIC概览               I2C是80年代飞利浦(Philips->NXP->高通)研 ...

  4. 洛谷P3376 【模板】网络最大流

    题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行 ...

  5. Java Web 笔试（面试）题

    1.Servlet 的生命周期,并说出 Servlet 与 CGI 的区别 Web 容器加载 Servlet 并将其实例化后,Servlet 生命周期开始,容器运行其 init 方法进行 Servle ...

  6. 线段树 || BZOJ1756: Vijos1083 小白逛公园 || P4513 小白逛公园

    题面:小白逛公园 题解: 对于线段树的每个节点除了普通线段树该维护的东西以外,额外维护lsum(与左端点相连的最大连续区间和).rsum(同理)和sum……就行了 代码: #include<cs ...

  7. VMware Workstation下ubuntu虚拟机无法上网连不上网络解决

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  8. 学习 yjango 博士的学习方法后的总结

    博士的初期内容主要是机器学习, 基于机器学习的理论来总结人类自身的学习过程和方式, 现总结博士视频中提到的主要方式 -.  学习的原则 例子重塑大脑 明确输入输出 用二阶知识拆分知识 二. 什么是学习 ...

  9. Windows平台分布式架构实践 - 负载均衡（转载）

    Windows平台分布式架构实践 - 负载均衡 概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Li ...

  10. node 解析图片二维码的内容

    const {readFile, readFileSync} = require('fs'); const decodeImage = require('jimp').read; const qrco ...