在客户端先通过JS验证后再将表单提交到服务器
问题：想要在客户端先通过JS验证后再将表单提交到服务器
参考资料：
试验过程：
服务器端使用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属性，会导致点击<button type="button">标签的按扭无法提交到服务器</span><br/>
<button type="button">使用button提交type="button"</button>
<span>无法提交<input type="submit" name="submit">的信息，因此不能将表单提交到服务器</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>';
}
?>
注意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验证后再将表单提交到服务器的更多相关文章
- form表单验证失败，阻止表单提交
form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...
- koa 基础（十）原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
- JS 无限长form表单提交
1 简介 开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件．再 ...
- 按钮js跳转到非表单提交页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- 原生js制作表单验证，基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
随机推荐
- Python学习之旅（二十五）
Python基础知识(24):正则表达式 正则表达式:检查一个字符串是否与某个模式匹配 \d :匹配数字 \w :匹配字母或数字 . :匹配任意字符 {n} :匹配n个字符 {m,n} :匹配m到n个 ...
- Python学习之旅（二十二）
Python基础知识(21):IO编程 一.文件读写 读写文件就是请求操作系统打开一个文件对象(文件描述符),然后,通过操作系统提供的接口从这个文件对象中读取数据(读文件),或者把数据写入这个文件对象 ...
- LIBS入门
样品汽化产生自由原子,原子电子的激发诱导光辐射产生表征原子的分立光谱,采集和分析光辐射. 光源:1064nm Nd:YAG固态激光器,10ns脉冲,焦点光密度1 GW·cm−2 可见和紫外光源. ...
- php const常量 不能使用字符串连接符.链接
class jdpay extends pay { const BASE_URL = "https://mapi.jdpay.com/npp10/"; private $agree ...
- python摸爬滚打之day18----instance, type, issubclass和反射
1.issubclass(a,b) ----> 判断a是否是b的子类. isinstance(a,b) ----> 判断a这个对象是否是b类型的(可以向上判断, 即考虑继承关系往父类 ...
- C++（+类型加强 +加入面向对象）
1.c++中所有变量可以在使用前定义. ; i< ; i++) { ; j< ; j++) { do_sth; } } 2. c++ 中可以获得 register 变量的地址. regis ...
- POSTGRESQL中ERROR: recursive query "t" column 2 has type character varying(150) in non-recursive term but type character varying overall
最近在做项目的时候有个需求是需要查到当前登录的用户下辖所有区域的数据,并将查询出来的部门信息以如下格式展示 最高人民法院>江苏省高级人民法院>南通市中级人民法院最高人民法院>江苏省高 ...
- java框架之Spring(5)-注解驱动开发
准备 1.使用 maven 创建一个 java 项目,依赖如下: <dependency> <groupId>org.springframework</groupId&g ...
- JMeter上架标的（yyb-csg）
yyb-csg 1.登录时一直提示用户名不能为空,可是明明已经传值了呀 解决:添加cookie管理器 2.怎么获取到待受理的项目, 在python脚本的实现过程中发现,在平台受理一步中传的lid值就是 ...
- C#设计模式(7)——适配器模式（Adapter Pattern）（转）
一.引言 在实际的开发过程中,由于应用环境的变化(例如使用语言的变化),我们需要的实现在新的环境中没有现存对象可以满足,但是其他环境却存在这样现存的对象.那么如果将“将现存的对象”在新的环境中进行调用 ...