zoukankan      html  css  js  c++  java
  • 两种类型的表单提交

    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>

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

    $("#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方法。

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

     
  • 相关阅读:
    BZOJ3036: 绿豆蛙的归宿
    BZOJ1419: Red is good
    BZOJ1013: [JSOI2008]球形空间产生器sphere
    BZOJ1415: [Noi2005]聪聪和可可
    BZOJ1417: Pku3156 Interconnect
    BZOJ1076: [SCOI2008]奖励关
    BZOJ2318: Spoj4060 game with probability Problem
    BZOJ1426: 收集邮票
    BZOJ2720: [Violet 5]列队春游
    BZOJ2698染色
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/3597546.html
Copyright © 2011-2022 走看看