两种类型的表单提交

简介:

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:'微软雅黑';">提&nbsp;交</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>

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

1
2
3
4
5
6
$( "#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方法。

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


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3597546.html,如需转载请自行联系原作者

相关文章
|
2天前
|
Android开发 开发者 Windows
这是我设计的一种不关机,然后改造操作系统的软件设计思路2.0版本
本文介绍了在不重启系统的情况下实现操作系统改造的两种方案。第一种方案通过SLFM Recovery模式,在独立于操作系统的最高权限环境下完成系统更新与改造,并支持断电恢复与失败回滚。第二种方案采用多分区机制,通过SLFM套件在独立分区中完成系统改造,适用于可中断与不可中断服务场景,确保系统更新过程的安全与稳定。
209 132
|
9天前
|
人工智能 算法 测试技术
轻量高效,8B 性能强劲书生科学多模态模型Intern-S1-mini开源
继 7 月 26 日开源『书生』科学多模态大模型 Intern-S1 之后,上海人工智能实验室(上海AI实验室)在8月23日推出了轻量化版本 Intern-S1-mini。
342 51
|
19天前
|
人工智能 JavaScript 前端开发
实战使用 Qwen3-coder 低代码开发 HTML 个人网站
阿里巴巴开源的Qwen3-coder模型,凭借强大性能和低代码能力,助力用户快速搭建个人网站。本文详解环境配置、提示词设计与部署流程,适合编程新手快速上手,掌握AI辅助开发技能。
1303 8