jquery formulaire validation imitation Toast effet d'invite partage d'exemple

Cet article présente principalement l'effet d'invite Toast du formulaire de vérification jquery. Le code d'implémentation est simple et facile à comprendre, ce qui est très bien. Les amis dans le besoin peuvent s'y référer.

Partie de contenu HTML

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

Invite HTML Et la partie style

<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>

validation du formulaire jquery (expression régulière)

//验证手机号码
    $("#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); 
    }
  });

Recommandations associées :

Exemple de partage de l'implémentation ReactNative de Toast

Utiliser le composant toast pour implémenter la fonction d'inviter les utilisateurs à oublier de saisir leur nom d'utilisateur ou mot de passe

Explication détaillée de la façon de mettre en œuvre un toast personnalisé dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!