toast提示框的使用 · 小裕的前端blog

#### **2017-12-1 6：47** #### **author：yang** ~~~ <div class="head"> <img class="head-img" src="img/regist.jpg" /> </div>  <div class="regist"> <form method="post" action=""> <ul> <li class="bottom-after"> <i class="icon iconfont icon-denglu-xingming"></i> <input type="text" class="reg-text username" placeholder="請輸入身份姓名"> </li> <li class="bottom-after"> <i class="icon iconfont icon-denglu-shenfenzheng"></i> <input type="text" class="reg-text userNum" placeholder="請輸入身份證號碼"> </li> <li class="bottom-after"> <i class="icon iconfont icon-denglu-xuehao"></i> <input type="text" class="reg-text xuehao" placeholder="請輸入學號"> </li> <li class="bottom-after"> <i class="icon iconfont icon-denglu-shouji"></i> <input type="tel" class="reg-text phone" placeholder="請輸入手機號碼"> <input typr="button" class="reg-yan" value="獲取驗證號"> </li> <li class="bottom-after"> <i class="icon iconfont icon-denglu-shouji"></i> <input type="text" class="reg-text code-number" placeholder="請輸入驗證碼"> </li> </ul> <input type="button" class="reg-btn" value="注冊" /> </form> </div> ~~~ css樣式 ~~~ .head{ width: 100%; } .head-img{ width: 100%; } .regist { width: 80%; margin: 25px auto; } .regist ul li { position: relative; width: 100%; height: 48px; } .regist ul li i.iconfont { position: absolute; left: 0; top: 0; line-height: 48px; color: #e3e3e3; z-index: 9; } .regist ul li .reg-text, .regist ul li input[type="text"] { position: absolute; top: 0; left: 0; width: 199%; height: 48px; padding-left: 30px; background: none; border: none; font-size: 14px; z-index: 8; } .regist ul li .reg-yan { width: 30%; height: 26px; margin-top: 11px; float: right; font-size: 12px; text-align: center; background-color: #ffdc44; border: none; border-radius: 10px; } .regist input[type="button"], .reg-btn { width: 100%; height: 44px; margin-top: 25px; border: none; background: #ffdc44; font-size: 16px; color: #fff; border-radius: 22px; } .regist input[type="button"]:active { background: #ffdc44; opacity: 0.8; } ~~~ js代碼 ~~~ /*注冊*/ $("form :input").blur(function () { var $parent = $(this).parent(); if($(this).is(".username")) { if($.trim(this.value) == "" || $.trim(this.value).length < 2 ){ mui.toast("填寫的名字與身份證的姓名不符"); } } }) $("form :input").blur(function () { var $parent = $(this).parent(); if($(this).is(".userNum")) { if($.trim(this.value) == "" || $.trim(this.value).length != 18){ mui.toast("填寫的名字與身份證號不符"); } } }) $("form :input").blur(function () { var $parent = $(this).parent(); if($(this).is(".xuehao")) { if($.trim(this.value) == "" || $.trim(this.value).length != 5){ mui.toast("填寫的學號不符"); } } }) $(function(){ function isPhoneNo(phone) { var m_phone = /^[1][34578][0-9]{9}$/; return m_phone.test(phone); } $(".reg-yan").click(function(){ if ($(".phone").val() == "") { mui.toast("手機號碼不能為空！"); }else if (!isPhoneNo($(".phone").val())){ mui.toast("請輸入正確的手機號碼！"); } }) $(".reg-btn").click(function() { var phone_text = $(".phone").val(); var code_text = $(".code-number").val(); if (!isPhoneNo(phone_text) || phone_text=="") { mui.toast("請輸入正確的手機號碼！"); }else if (code_text == ""){ mui.toast("請輸入驗證碼！"); } }) }) ~~~