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 相关文章推荐
js window.print实现打印特定控件或内容
Sep 16 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
简单实现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
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
图片完美缩放
2006/09/07 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
WebPack基础知识详解
2017/01/16 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Django 路由系统URLconf的使用
2018/10/11 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python urllib和urllib3知识点总结
2021/02/08 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
保护环境倡议书范文
2014/05/13 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
新学期开学标语2015
2015/07/16 职场文书
了解Redis常见应用场景
2021/06/23 Redis