jquery form validation imitation Toast prompt effect example sharing-JS Tutorial-php.cn

jquery form validation imitation Toast prompt effect example sharing

小云云

Release： 2018-01-23 16:53:15

Original

1737 people have browsed it

This article mainly introduces the Toast prompt effect of the jquery verification form. The implementation code is simple and easy to understand, which is very good. Friends who need it can refer to it. I hope it can help everyone.

HTML content part

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

Copy after login

Prompt html and style Part

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

Copy after login

jquery form validation (regular expression)

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

Copy after login

Related recommendations:

Example sharing of ReactNative implementation of Toast

Use toast component to implement the function of prompting users to forget to enter their username or password

Detailed explanation of the custom toast implementation method of WeChat applet

The above is the detailed content of jquery form validation imitation Toast prompt effect example sharing. For more information, please follow other related articles on the PHP Chinese website!