jquery表單驗證實例仿Toast提示效果
更新時間:2017年03月03日 09:24:48 作者:ithuangjiaqi
這篇文章主要介紹了jquery驗證表單仿Toast提示效果,實現(xiàn)代碼簡單易懂,非常不錯,需要的朋友可以參考下

HTML內(nèi)容部分
<div class="classname">
<label for="">請輸入您的手機號碼</label> <input type="text" id="MobilePhone"/>
<input type="text" /> -->
</div>
提示html及樣式部分
<div id="errormsg" style="display: none;"></div>
<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>
jquery表單驗證(正則表達式)
//驗證手機號碼
$("#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);
}
});
以上所述是小編給大家介紹的jquery表單驗證實例仿Toast提示效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個jquery的擴展,這樣就可以很容易實現(xiàn)對textarea控制最大長度了。2011-09-09
基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
本篇文章介紹了,基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解需要的朋友參考下2013-04-04
jQuery怎么解析Json字符串(Json格式/Json對象)
可以利用jquery或js解析json數(shù)據(jù),下面與大家分享下jquery解析json字符串方法,一個是解析Json格式,一個是解析Json對象,感興趣的朋友可以學(xué)習(xí)下2013-08-08
使用jQuery mobile庫檢測url絕對地址和相對地址的方法
這篇文章主要介紹了使用jQuery mobile庫監(jiān)測絕對地址和相對地址的方法,分別是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以參考下2015-12-12
jQuery實現(xiàn)返回頂部功能適合不支持js的瀏覽器
a標簽指向錨點top,可以在頂部防止一個a name=top的錨點,這樣在瀏覽器不支持js時也可以實現(xiàn)返回頂部的效果了2014-08-08
jQuery學(xué)習(xí)心得總結(jié)(必看篇)
下面小編就為大家?guī)硪黄猨Query學(xué)習(xí)心得總結(jié)(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06

