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 相关文章推荐
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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中计算字符串相似度的函数代码
2012/12/29 PHP
PHP加密解密类实例代码
2016/07/20 PHP
基于php判断客户端类型
2016/10/14 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
基于滚动条位置判断的简单实例
2017/12/14 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
python的常见命令注入威胁
2013/02/18 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python中logging库的使用总结
2017/10/18 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
python eventlet绿化和patch原理
2020/11/21 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
大学运动会入场词
2014/02/22 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
大学生自荐信范文
2015/03/05 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS