表单验证提交——submit与button
之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别。今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解:
submit:
从字面上看是“提交”的意思,专门为提交而生。他既可以接受点击提交表单也能接受Enter(回车键)提交表单(也就是表单里的控件在获取焦点的时候回车直接提交表单),这样就比较人性化。
<form name="myForm" action="http://www.baidu.com" method="get" >
name:<input name="name" type="text" /><br />
<input name="submit" type="submit" value="submit提交" />
</form>
当我输入"xiaomou"回车的时候表单提交了,url为:http://www.baidu.com/?name=xiaomou&submit=submit提交
button:
就是个普通的按钮,接受回车提交表单,但是点击它的时候没反应(当然我说的是没有js的情况下),如要他实现简单的提交表单,要通过表单提交事件,<input name="button" type="button" value="button提交" onClick="this.form.submit()"/>,这时候你会惊奇的发现它也能像submit按钮一样点击就可以提交表单了
<form name="myForm" action="http://www.baidu.com" method="get" >
name:<input name="name" type="text" /><br />
<input name="button" type="button" value="button提交" onClick="this.form.submit()"/>
</form>
同样当我输入"xiaomou"回车的时候表单提交了,url为:http://www.baidu.com/?name=xiaomou,没有了submit=submit提交
下面通过测试代码比较一下他们表单验证提交的不同实现方法:
通过submit按钮触发表单的提交事件onSubmit来提交表单
<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()" >
name:<input name="name" type="text" /><br />
<input name="submit" type="submit" value="submit提交"/>
</form>
<script>
function submitForm(){
var _form=document.forms[0];
//var _form=document.getElementsByName("myForm")[0];
//var _form=document.getElementsByName("myForm").item(0);
return checkName(_form.name,_form.name.value);
}
function checkName(id,name) {
var filter1 = /^[A-Za-z]+$/;
var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
if (filter1.test(name)||filter2.test(name)){
return true;
}
else {
alert("请输入名字,名字上不能出现数字或特殊字符");
id.focus();
return false;
}
}
</script>
当然也可以在submit按钮onClick提交,如:
<form name="myForm" action="http://www.baidu.com" method="get" >
name:<input name="name" type="text" /><br />
<input name="submit" type="submit" value="submit提交" onClick="return submitForm()"/>
</form>
<script>
function submitForm(){
var _form=document.forms[0];
//var _form=document.getElementsByName("myForm")[0];
//var _form=document.getElementsByName("myForm").item(0);
return checkName(_form.name,_form.name.value);
}
function checkName(id,name) {
var filter1 = /^[A-Za-z]+$/;
var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
if (filter1.test(name)||filter2.test(name)){
return true;
}
else {
alert("请输入名字,名字上不能出现数字或特殊字符");
id.focus();
return false;
}
}
</script>
把上面的代码换成button按钮
<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()" >
name:<input name="name" type="text" /><br />
<input name="button" type="button" value="button提交"/>
</form>
<script>
function submitForm(){
var _form=document.forms[0];
//var _form=document.getElementsByName("myForm")[0];
//var _form=document.getElementsByName("myForm").item(0);
return checkName(_form.name,_form.name.value);
}
function checkName(id,name) {
var filter1 = /^[A-Za-z]+$/;
var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
if (filter1.test(name)||filter2.test(name)){
return true;
}
else {
alert("名字不能出现数字或特殊字符");
id.focus();
return false;
}
}
</script>
如上这一段代码点击提交按钮没反应,只能接受回车键提交事件,那在给botton按钮加上onClick="this.form.submit()"会不会触发提交事件呢?结果如愿的实现了一半!!——没有通过验证就直接提交了,只是直接执行了submit()事件提交了表单而已,没有执行onSubmit="return submitForm()"里的表单验证事件就提交了。
<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()">
name:<input name="name" type="text" /><br />
<input name="button" type="button" value="button提交" onClick="this.form.submit()"/>
</form>
<script>
function submitForm(){
var _form=document.forms[0];
//var _form=document.getElementsByName("myForm")[0];
//var _form=document.getElementsByName("myForm").item(0);
return checkName(_form.name,_form.name.value);
}
function checkName(id,name) {
var filter1 = /^[A-Za-z]+$/;
var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
if (filter1.test(name)||filter2.test(name)){
return true;
}
else {
alert("名字不能出现数字或特殊字符");
id.focus();
return false;
}
}
</script>
如要让它接受回车键提交与点击提交都执行表单验证后再提交上服务器,只能再修改js了,如下代码修改过后能实现:
<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()">
name:<input name="name" type="text" /><br />
<input name="button" type="button" value="button提交" onClick="submitForm()"/>
</form>
<script>
function submitForm(){
var _form=document.forms[0];
if (checkName(_form.name,_form.name.value)){
_form.submit();
}else{
_form.onSubmit=false;
return false;
}
}
function checkName(id,name) {
var filter1 = /^[A-Za-z]+$/;
var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
if (filter1.test(name)||filter2.test(name)){
return true;
}
else {
alert("名字不能出现数字或特殊字符");
id.focus();
return false;
}
}
</script>
表单验证提交——submit与button的更多相关文章
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- form表单重复提交,type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
- jquery.validate+jquery.form表单验证提交
1.通过jquery.validate的submitHandler选项,即当表单通过验证时运行回调函数.在这个回调函数中通过jquery.form来提交表单: <script type=&quo ...
- AngularJS的表单验证提交示例
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...
- Jquery插件easyUi表单验证提交
<form id="myForm" method="post"> <table align="center" style= ...
- jQuery Validatede 结合Ajax 表单验证提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- boostrap ajax表单验证提交
=============================================================================== 1. 1 <link href=& ...
随机推荐
- FSG1.33解压缩算法分析
之前只是知道怎样脱去fsg壳,对壳的压缩算法没有太多的注意,今天就对算法进行一些分析 使用的版本是fsg1.33,首先用peid查壳: 2.将程序载入OD,看到如下代码 可以看到这段代码主要是从以es ...
- Swift—Core Foundation框架-备
Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风格的API比较麻烦,但是在OS X和iOS开发 ...
- dos命令弹出对话框---Msg命令详解
标签: dos批处理对话框 2015-11-12 17:20 497人阅读 评论(0) 收藏 举报 脚本(30) 版权声明:本文为博主原创文章,未经博主允许不得转载. dos命令弹出对话框---Ms ...
- ChangeServiceConfig2 function
ChangeServiceConfig2 function Changes the optional configuration parameters of a service. Syntax C ...
- error: No resource identifier found for attribute ‘backIcon’ in package
异常提示: 今天我新创建了一个自定义控件,我为他定义了一个属性为backIcon,但是当我在xml设置这个属性之后,xml布局界面提示以下错误: 错误原因: 在网上查找错误原因的时候,有文章说这是因为 ...
- logstash multiline
filter { multiline { pattern => "^\s+%{TIMESTAMP_ISO8601}" negate=>true what=>&qu ...
- 2014-08-05 再次接触VBA
今天是在吾索实习的第20天.本来今天的计划是完成BBS的界面的设计的,但是中途发生了一些小插曲,经理要求我帮忙用VBA实现EXCEL中表与表之间的动态联编,而且答应了客户明天就要看到成品了.所以只好放 ...
- 黑马程序员_Java集合框架
集合类 1,为什么出现集合类? 面向对象语言对食物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 2,数组和集合类同是容器,有何不同? 数组 ...
- HDU_2014——计算平均分
Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分. Input 输入数据有多组,每 ...
- codevs1044:dilworth定理
http://www.cnblogs.com/submarine/archive/2011/08/03/2126423.html dilworth定理的介绍 题目大意:求一个序列的lds 同时找出这个 ...