Heim > Web-Frontend > js-Tutorial > Hauptteil

JQuery-Formularvalidierungsimitation Toast-Eingabeaufforderungseffekt Beispielfreigabe

小云云
Freigeben: 2018-01-23 16:53:15
Original
1721 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Toast-Eingabeaufforderungseffekt des JQuery-Verifizierungsformulars vorgestellt. Der Implementierungscode ist sehr gut und ich hoffe, dass er allen helfen kann.

HTML-Inhaltsteil


<p class="classname">
      <label for="">请输入您的手机号码</label> <input type="text" id="MobilePhone"/>
     <input type="text" /> -->
 </p>
Nach dem Login kopieren

Eingabeaufforderungs-HTML Und der Stilteil


<p id="errormsg" style="display: none;"></p>
          <style>
            #errormsg{
              width: auto;
              height: 20px;
              padding: 1px 5px;
              text-align: center;
              background-color: #000;
              opacity: 0.5;
              color: #fff;
              position: fixed;
              left: 50%;
              margin-left: -50px;
              top: 93%;
              border-radius: 20px;
            }
          </style>
Nach dem Login kopieren

jQuery-Formularvalidierung (regulärer Ausdruck)


//验证手机号码
    $("#MobilePhone").blur(function(){
     var tel = $("#MobilePhone").val();//获取输入的手机号
    var yidongreg = /^(134[012345678]\d{7}|1[34578][012356789]\d{8})$/;
    var dianxinreg = /^1[3578][01379]\d{8}$/;
    var liantongreg = /^1[34578][01256]\d{8}$/;
    if (yidongreg.test(tel) || dianxinreg.test(tel) || liantongreg.test(tel))
    {
           $("errormsg").css({"display":"block"});
           $("#errormsg").html("请输入正确号码").fadeIn(300).delay(2000).fadeOut(300);
    }else{
           $("errormsg").css({"display":"block"});
           $("#errormsg").html("请输入正确号码").fadeIn(300).delay(2000).fadeOut(300); 
    }
  });
Nach dem Login kopieren

Verwandte Empfehlungen:

Beispielfreigabe der ReactNative-Implementierung von Toast

Verwenden Sie die Toast-Komponente, um die Funktion zu implementieren, die Benutzer dazu auffordert, die Eingabe ihres Benutzernamens zu vergessen oder Passwort

Detaillierte Erklärung zur Implementierung eines benutzerdefinierten Toasts im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonJQuery-Formularvalidierungsimitation Toast-Eingabeaufforderungseffekt Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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