Heim > Web-Frontend > js-Tutorial > Hauptteil

Einfache Implementierung des JavaScript-Bildwechseleffekts

高洛峰
Freigeben: 2016-12-03 16:30:58
Original
1666 Leute haben es durchsucht

In diesem Artikel werden zwei Arten von Formularübermittlungsmethoden in JS anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1 Nachdem die ursprüngliche

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

-Schaltfläche hier gesendet wurde, führen Sie die subForm()-Methode aus, subForm kann dies überprüfen form und geben Sie false zurück, das Formular wird nicht gesendet. Ansonsten absenden.

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;
}
Nach dem Login kopieren

Verschiedene Überprüfungen!

Senden von 2.js festgelegt

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

Dies ist keine Senden-Schaltfläche, sondern eine simulierte Senden-Schaltfläche.

$("#submit").click(function(){
   if(loginForm())
   {
     $("#form_login").submit();
   }
});
Nach dem Login kopieren

löst das Übermittlungsereignis aus. Die Verwendung von

onsubmit="return loginForm();" hat keine Auswirkung, unabhängig davon, ob es false zurückgibt. Daher müssen Sie einige Überprüfungen durchführen, bevor Sie es tatsächlich einreichen.

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;
}
Nach dem Login kopieren

Gib false zurück und die Submit-Methode wird nicht aufgerufen.

Dies sind zwei Möglichkeiten, den Auftakt zur Formulareinreichung zu handhaben.


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!