效果圖:
html代碼:
<form action="" method="" name="form2"> <p class="m_t30 error_p2"> <p> 我是 <select name="identity" id="ko" class="form-control"> <option></option> <option value="investor">投資者</option> <option value="developer">地產(chǎn)開(kāi)發(fā)商</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="text" class="form-control" name="name" placeholder="用戶名"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="email" class="form-control" name="email" placeholder="電子郵箱"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="tel" class="form-control" name="phone" placeholder="手機(jī)"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <select name="country" class="form-control"> <option></option> <option>國(guó)家或地區(qū)</option> <option value="1">中國(guó)</option> <option value="2">美國(guó)</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <select name="province" class="form-control"> <option></option> <option>州/省</option> <option value="1">廣東</option> <option value="2">加州</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="password" class="form-control" name="pwd" placeholder="密碼"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="password" class="form-control" name="pwd2" placeholder="再次確認(rèn)密碼"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊(cè)錯(cuò)誤信息</p> </p> </p> <p class="m_t10"> <p> <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button> </p> </p> </form>
css代碼:
<style> .m_t10 { margin-top: 20px; } .error_p2 { background-color: #FF6900; color: white; font-size: 10px; padding: 5px; border-radius: 5px; display: none; } .error_p2 i { margin-right: 5px; } </style>
js代碼
簡(jiǎn)要說(shuō)明:
//執(zhí)行對(duì)應(yīng)表單元素的失去焦點(diǎn)事件$('input[name=XX]',formX).blur() //定義對(duì)應(yīng)的參數(shù)來(lái)獲取值,如:var pwd=$(this).val(); //定義參數(shù)獲取對(duì)應(yīng)錯(cuò)誤提示信息的標(biāo)簽元素對(duì)象,這里的是var span = $(this).parents('.error_p2').find('.error_p2'); //簡(jiǎn)要說(shuō)明.parents('')方法獲取的是祖先元素為('.error_p2'),看清楚有帶"s",簡(jiǎn)單來(lái)說(shuō)如果.error_p2是當(dāng)前元素的上三級(jí)$('this').parent().parent().parent(),而用$('this').parents('.error_p2')能一步到位獲取到該元素對(duì)象,而find('')方法剛好相反,一步到位的獲取對(duì)應(yīng)后輩元素對(duì)象 //然后就是根據(jù)條件判斷,判斷的正則表達(dá)式我就不一 一舉例了(因?yàn)槲乙灿洸蛔∧敲炊? =、),是否符合返回對(duì)應(yīng)的數(shù)組元素true、false值,實(shí)現(xiàn)隱藏錯(cuò)誤提示,并且給數(shù)組validate2的值賦值。 //最后提交表單時(shí),再次執(zhí)行判斷isOK是否為true //isOK值為false的話就全部執(zhí)行一次表單元素的失去焦點(diǎn)事件,從而提示錯(cuò)誤信息 //isOK值為true的話才提交表單。 //ps:表單里的button元素如果不是提交按鈕,記得將type=“button”,否則默認(rèn)是type=“submit”,點(diǎn)擊就會(huì)提交;
寫在最后的話:
樣式和布局沒(méi)怎么設(shè)置好,頁(yè)面效果欠佳,深感抱歉
還是那句話,寫jq先想好要獲取哪些對(duì)象,執(zhí)行什么事件,最后什么元素對(duì)象達(dá)到怎樣的效果,parents和find方法和省事,不過(guò)使用時(shí)注意嵌套好p達(dá)到整體性效果。
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com