JS两种类型的表单提交方法实例分析


Posted in Javascript onNovember 28, 2016

本文实例分析了JS两种类型的表单提交方法。分享给大家供大家参考,具体如下:

1.原始的

<form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();">
<button type="submit" class="button red" style="font-size:18px; font-family:'微软雅黑';">提 交</button>

这里的button提交之后,执行subForm()方法,subForm可以对表单进行验证,返回false,表单不提交。否则提交。

function subForm()
{
  var flag = true;
  $(".required").each(function(){
    if(!$(this).val())
    {
      flag = false;
      $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
      $(this).attr("status","1").val("此处为必填项,请您填写!");
    }
  });
 /*$(".idCardNo").each(function(){
  if(!idCardNo($(this).val()))
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   if($(this).attr("status")!=1){
    $(this).attr("status","1").val("请填写正确的身份证号码!");
   }
  }
 });*/
 var reg = new RegExp("^[0-9]*$");
 $(".number").each(function(){
  if(!reg.test($(this).val()))
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   if($(this).attr("status")!=1){
    $(this).attr("status","1").val("请填写正确的联系电话!");
   }
  }
 });
 $(".exCardNo").each(function(){
  if(exCardNo($(this).val())==1)
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   if($(this).attr("status")!=1){
    $(this).attr("status","1").val("此身份证已报名!");
   }
  }
 });
  return flag;
}

各种验证!

2.js设置的提交

<form method="post" action="/student/stureg/reglogin" id="form_login">
<a id="submit"><img src="/images/login/login_bt.png" style="cursor:pointer"/></a>

这里并不是提交按钮,而是一个模拟提交的按钮。

$("#submit").click(function(){
   if(loginForm())
   {
     $("#form_login").submit();
   }
});

触发提交事件,这里用

onsubmit="return loginForm();"就没效果了,不管是否返回false都会提交。所以要在真正提交之前,做一下验证。

function loginForm(){
 var flag = true;
 $(".notnull").each(function(){
  if(!$(this).val())
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   $(this).attr("status","1").val("不能为空");
  }
 });
 return flag;
}

返回false,就不调用submit方法。

这就是两种处理表单提交前奏的方式。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
简单实现JavaScript图片切换效果
Nov 28 #Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 #Javascript
JS调用打印机功能简单示例
Nov 28 #Javascript
完全深入学习Bootstrap表单
Nov 28 #Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 #Javascript
Bootstrap选项卡动态切换效果
Nov 28 #Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
深入PHP异步执行的详解
2013/06/03 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
微信access_token的获取开发示例
2015/04/16 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python如何实现定时器功能
2020/05/28 Python
Python 如何测试文件是否存在
2020/07/31 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
初中生自我评价
2014/02/01 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
四风对照检查材料范文
2014/09/27 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Python实现视频自动打码的示例代码
2022/04/08 Python
Moment的feature导致线上bug解决分析
2022/09/23 Javascript